Ваш заголовок - одна из самых важных частей вашей домашней страницы. Обычно это то, что вы видите в первую очередь, и, следовательно, то, что определяет первое впечатление. Как и любое другое первое впечатление, вы хотите, чтобы оно было хорошим. Теперь, если вы ищете творческий способ представить свой заголовок, вам понравится это руководство, поскольку мы покажем вам, как добавить анимацию текстовых блоков CSS к заголовку, а также вы можете бесплатно загрузить файл JSON макета!
обследование
Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.
Давайте начнем дизайн
Добавить раздел № 1
Градиентный фон
Начните с добавления обычного раздела на новую страницу или на страницу, над которой вы работаете. Откройте настройки раздела и примените следующий градиентный фон:
- Цвет 1: # f0f2b
- Цвет 2: # c10b1a
- Тип градиента: линейный
- Направление градиента: 63 градусов
расстояние
Перейдите на вкладку дизайна раздела и примените следующие настраиваемые значения заливки сверху и снизу на экранах разных размеров:
- Верхний отступ: 7vw (рабочий стол), 20vw (планшет), 25vw (телефон)
- Нижняя обивка: 7vw (рабочий стол), 20vw (планшет), 25vw (телефон)
Граница
Также добавьте границу в раздел.
- Ширина границы: 2vw (сверху, слева, справа)
- Ширина нижней границы: 0vw
- Цвет границы: #ffffff
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:
калибровка
Откройте параметры линии и измените параметры размеров соответственно:
- Ширина: 100%
- Максимальная ширина: 100%
Добавить текстовый модуль в столбец
Добавить контент H1
Затем добавьте текстовый модуль с заголовком H1 на ваш выбор.
Добавьте теги Div к каждому слову в заголовке H1
Переключитесь на вкладку текста вашего заголовка и добавьте разные div к каждому слову в заголовке. CSS ID должен быть разным для каждого слова.
готовы
в
Построить
красивая
Веб-сайты?
Настройки текста H1
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста H1:
- Шрифт заголовка: Work Sans
- Вес шрифта заголовка: средний
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 4vw (рабочий стол), 5vw (планшет), 6vw (телефон)
- Высота линии головы: 1,4 em
расстояние
Затем измените значения полей для разных размеров экрана.
- Левое поле: 20vw (стол и планшет), 15vw (телефон)
- Правое поле: 35vw (рабочий стол), 20vw (планшет), 15vw (телефон)
Добавить модуль кода в столбец
Вставьте код CSS
Чтобы анимация текстового блока применялась к нашему заголовку, нам понадобится код CSS. Мы добавим этот код CSS в новый модуль кода.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
расстояние
Перейдите на вкладку дизайна модуля и удалите все нижние отступы по умолчанию.
- Нижнее поле: 0px
Добавить кнопочный модуль в столбец
Добавить копию
Следующий необходимый нам модуль - это кнопочный модуль. Введите копию по вашему выбору.
Настройки кнопок
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки кнопок:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: # 000000
- Ширина границы кнопки: 0 пикселей
- Шрифт кнопки: Work Sans
расстояние
Затем перейдите к настройкам интервалов и примените пользовательские значения полей и отступов для разных размеров экрана.
- Верхнее поле: 3vw (офис),
- Левое поле: 20vw (стол и планшет), 15vw (телефон)
- Верхний отступ: 1.2vw (рабочий стол), 2vw (планшет), 4vw (телефон)
- Нижняя обивка: 1.2vw (рабочий стол), 2vw (планшет), 4vw (телефон)
- Левый отступ: 1.8vw (рабочий стол), 3vw (планшет), 6vw (телефон)
- Правая обивка: 1.8vw (рабочий стол), 3vw (планшет), 6vw (телефон)
Анимация
Также настройте параметры анимации.
- Стиль анимации: флип
- Направление анимации: вниз
- Задержка анимации: 2000 мс
- Интенсивность анимации: 100%
- Непрозрачность начала анимации: 100%
- Кривая скорости анимации: легкость входа-выхода
- Повтор анимации: один раз
Добавить раздел № 2
Продолжите, добавив новый регулярный раздел чуть ниже предыдущего.
расстояние
Откройте раздел настроек и удалите верхний отступ по умолчанию.
- Верхняя обивка: 0px
Добавить новую строку
Структура столбца
Продолжите добавлять новую строку, используя следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии и дайте линии занимать всю ширину контейнера раздела.
- Ширина: 100%
- Максимальная ширина: 100%
Добавить текстовый модуль в столбец
Добавить контент
Затем добавьте текстовый модуль с содержание описание по вашему выбору.
Фоновый цвет
Добавьте белый цвет фона.
- Цвет фона: #ffffff
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
- Шрифт текста: Work Sans
- Цвет текста: # 9b9b9b
- Размер текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Высота строки текста: 2.6em
расстояние
Также добавьте настраиваемые значения интервала для экранов разных размеров.
- Верхнее поле: -5vw (рабочий стол), -20vw (планшет), -27vw (телефон)
- Левое поле: 20vw (рабочий стол), 13vw (планшет), 8vw (телефон)
- Правое поле: 20vw (рабочий стол), 13vw (планшет), 8vw (телефон)
- Верхняя обивка: 5vw (рабочий стол), 7vw (планшет и телефон)
- Нижняя обивка: 5vw (рабочий стол), 7vw (планшет и телефон)
- Левый отступ: 3vw (рабочий стол), 5vw (планшет), 6vw (телефон)
- Правая обивка: 3vw (рабочий стол), 5vw (планшет), 6vw (телефон)
Shadow box
И завершите настройки модуля, применив тонкую тень блока. Это оно!
- Box Shadow Blur Сила: 50px
- Цвет тени: rgba (0,0,0,0,1)
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Заключительные мысли
В этой статье мы показали вам, как добавить анимацию текстовых блоков CSS к вашему заголовку. Важно убедиться, что ваш заголовок виден и читается с самого начала, добавление анимации к заголовку определенно может помочь! Вы также смогли бесплатно скачать файл макета в формате JSON. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Переведено с: ElegantThemes
