Как добавить анимацию блока текста CSS в заголовок с помощью Divi
Опубликовано: 2020-01-25Заголовок - одна из самых важных частей вашей домашней страницы. Обычно это первая книга, которую люди читают и которая производит первое впечатление. Как и любое другое первое впечатление, вы хотите, чтобы оно было хорошим. Теперь, если вы ищете творческий способ продемонстрировать свой заголовок, вам понравится этот пост. В этом руководстве мы покажем вам, как добавить анимацию текстовых блоков CSS в заголовок, и вы также сможете бесплатно загрузить файл JSON макета!
Давайте перейдем к этому.
Предварительный просмотр
Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.
Рабочий стол
Мобильный
Загрузите макет анимации текстового блока БЕСПЛАТНО
Чтобы получить доступ к макету анимации свободного текстового блока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Начнем воссоздавать!
Добавить раздел # 1
Градиентный фон
Начните с добавления обычного раздела на новую страницу или страницу, над которой вы работаете. Откройте настройки раздела и примените следующий градиентный фон:
- Цвет 1: # ff0f2b
- Цвет 2: # c10b1a
- Тип градиента: линейный
- Направление градиента: 63 град.
Интервал
Перейдите на вкладку дизайна раздела и примените следующие настраиваемые значения верхнего и нижнего отступов для разных размеров экрана:
- Верхняя подкладка: 7vw (рабочий стол), 20vw (планшет), 25vw (телефон)
- Нижняя прокладка: 7vw (рабочий стол), 20vw (планшет), 25vw (телефон)
Граница
Также добавьте границу к разделу.
- Ширина границы: 2vw (сверху, слева, справа)
- Ширина нижней границы: 0vw
- Цвет границы: #ffffff
Добавить новую строку
Структура столбца
Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:
Размеры
Откройте настройки строки и соответствующим образом измените настройки размера:
- Ширина: 100%
- Максимальная ширина: 100%
Добавить текстовый модуль в столбец
Добавить контент H1
Затем добавьте текстовый модуль с заголовком H1 по вашему выбору.
Добавить теги Div к каждому слову в заголовке H1
Переключитесь на текстовую вкладку копии заголовка и добавьте отдельный div к каждому слову заголовка. Идентификатор CSS должен быть разным для каждого слова.
<h1><div id="word-1" class="display-state">Ready</div> <div id="word-2" class="display-state">to</div> <div id="word-3" class="display-state">Build</div> <div id="word-4" class="display-state">Beautiful</div> <div id="word-5" class="display-state">Websites?</div></h1>
Настройки текста 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>
Интервал
Перейдите на вкладку дизайна модуля и удалите все нижние отступы по умолчанию.
- Нижнее поле: 0 пикселей
Добавить модуль кнопки в столбец
Добавить копию
Следующий необходимый нам модуль - это кнопочный модуль. Введите какую-нибудь копию по вашему выбору.
Настройки кнопок
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки кнопок:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: # 000000
- Ширина границы кнопки: 0 пикселей
- Шрифт кнопки: Work Sans
Интервал
Затем перейдите к настройкам интервалов и примените некоторые настраиваемые значения полей и отступов для разных размеров экрана.
- Верхняя маржа: 3vw (Desktop),
- Левое поле: 20vw (настольный компьютер и планшет), 15vw (телефон)
- Верхнее заполнение: 1,2vw (рабочий стол), 2vw (планшет), 4vw (телефон)
- Нижняя обивка: 1,2 мм (рабочий стол), 2 мм (планшет), 4 мм (телефон)
- Левое заполнение: 1.8vw (рабочий стол), 3vw (планшет), 6vw (телефон)
- Правая прокладка: 1.8vw (рабочий стол), 3vw (планшет), 6vw (телефон)
Анимация
Также настройте параметры анимации.
- Стиль анимации: флип
- Направление анимации: вниз
- Задержка анимации: 2000 мс
- Интенсивность анимации: 100%
- Начальная непрозрачность анимации: 100%
- Кривая скорости анимации: легкость выхода
- Повтор анимации: один раз
Добавить раздел # 2
Продолжите, добавив новый обычный раздел прямо под предыдущим.
Интервал
Откройте настройки раздела и удалите верхний отступ по умолчанию.
- Верхний отступ: 0 пикселей
Добавить новую строку
Структура столбца
Продолжите, добавив новую строку, используя следующую структуру столбцов:
Размеры
Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке занять всю ширину контейнера раздела.
- Ширина: 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 (телефон)
Коробка Тень
И завершите настройки модуля, применив тонкую тень блока. Вот и все!
- Сила размытия тени коробки: 50 пикселей
- Цвет тени: rgba (0,0,0,0.1)
Предварительный просмотр
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.
Рабочий стол
Мобильный
Последние мысли
В этом посте мы показали вам, как добавить анимацию текстовых блоков CSS в заголовок. Важно, чтобы заголовок был виден и читался с самого начала, добавление анимации к заголовку может помочь в этом! Вы также можете бесплатно скачать файл JSON макета. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.