Как добавить расширенную текстовую анимацию в Divi с Letterize.js и Anime.js

Встроенная анимация Divi предоставляет массу возможностей, когда дело доходит до добавления дополнительных преимуществ на ваш сайт. Однако эти анимации позволяют добавлять по одной анимации в один контейнер за раз. Хотя в большинстве случаев этого более чем достаточно, есть проекты, в которых вы захотите приложить дополнительные усилия. Например, вы можете захотеть добавить расширенную текстовую анимацию. В этом уроке мы покажем вам, как именно это сделать. Это руководство является отличной отправной точкой, если вы хотите научиться комбинировать Divi в качестве фреймворка с внешними библиотеками Javascript. Мы создадим весь наш дизайн, используя встроенные элементы и параметры Divi, а затем настроим наш текстовый модуль с библиотеками letterize.js и anime.js для создания расширенной текстовой анимации. Как только вы поймете этот подход, вы сможете создавать любую расширенную текстовую анимацию, какую только можете себе представить!

Давайте приступим к делу!

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО макет Advanced Text Animations Layout

Чтобы получить бесплатный макет с расширенной текстовой анимацией, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

1. Создайте дизайн раздела героя

Добавить новый раздел

Интервал

Начните с создания новой страницы или открытия существующей. Внутри вашей страницы добавьте новый раздел. Откройте настройки раздела и измените верхнее и нижнее отступы для разных размеров экрана.

• Верхний отступ: 180 пикселей (рабочий стол), 100 пикселей (планшет), 50 пикселей (телефон)
• Нижний отступ: 180 пикселей (рабочий стол), 100 пикселей (планшет), 50 пикселей (телефон)

Добавить строку №1

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Интервал

Еще не добавляя никаких модулей, откройте настройки строки и удалите все нижние отступы по умолчанию.

• Нижний отступ: 0 пикселей

Добавить текстовый модуль №1 в столбец

Добавить копию H1

Единственный модуль, который нам нужен в этой строке, - это текстовый модуль. Добавьте контент H1 по вашему выбору.

Настройки текста H1

Перейдите на вкладку дизайна модуля и измените настройки текста H1 следующим образом:

• Шрифт заголовка: Montserrat
• Цвет текста заголовка: rgba (232,232,232,0,41)
• Размер текста заголовка: 80 пикселей (рабочий стол), 50 пикселей (планшет), 40 пикселей (телефон)
• Расстояние между буквами заголовка: -10 пикселей (рабочий стол), -4 пикселя (планшет), -3 пикселя (телефон)
• Высота строки заголовка: 0,6 м (рабочий стол), 0,7 м (планшет), 0,8 м (телефон)

Добавить строку №2

Структура столбца

Добавьте еще одну строку прямо под предыдущей, используя следующую структуру столбцов:

Размеры

Откройте настройки строки и измените максимальную ширину в настройках размера.

• Максимальная ширина: 1680 пикселей

Интервал

Затем удалите все нижние поля и отступы.

• Нижнее поле: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить модуль изображения в столбец

Загрузить иллюстрацию

Затем добавьте модуль изображения и загрузите бесплатную иллюстрацию, которую вы можете найти в папке, которую вы смогли загрузить в начале этого сообщения.

Размеры

Перейдите на вкладку дизайна модуля и установите полную ширину изображения.

• Принудительная полная ширина: Да

Интервал

Затем добавьте отрицательное нижнее поле.

• Нижняя маржа: -12%

Анимация

И завершите настройку модуля, добавив следующие настройки анимации:

• Стиль анимации: Затухание
• Задержка анимации: 3000 мс

Добавить строку №3

Структура столбца

Переходим к следующему и последнему ряду. Используйте следующую структуру столбцов:

Интервал

Перейдите на вкладку дизайна строки и добавьте несколько пользовательских значений заполнения.

• Верхняя набивка: 10%
• Нижняя обивка: 5%
• Левый отступ: 3%
• Правое заполнение: 3%

Коробка Тень

Затем включите тонкую тень блока.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.06)

Анимация

И завершите настройку строки, добавив следующую анимацию:

• Стиль анимации: Затухание
• Задержка анимации: 3000 мс

Добавить текстовый модуль №2 в столбец

Добавить содержимое

Пора добавлять модули. Первый модуль, который нам нужен, - это текстовый модуль с некоторым описанием.

Настройки текста

Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:

• Шрифт текста: Lato
• Размер текста: 18 пикселей
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 2.7em

Добавить модуль кнопки в столбец

Добавить копию

Последний модуль, который нам нужен, - это кнопочный модуль. Введите какую-нибудь копию по вашему выбору.

Настройки кнопок

Перейдите на вкладку дизайна модуля и измените настройки кнопки следующим образом:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки: # 171cff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Montserrat
• Стиль шрифта кнопок: прописные

Интервал

Затем примените следующие значения отступов в настройках интервалов:

• Верхняя набивка: 2%
• Нижняя обивка: 2%
• Левый отступ: 5%
• Правое заполнение: 5%

Коробка Тень

Завершите настройку модуля, добавив следующую тень блока:

• Положение прямоугольной тени по вертикали: 5 пикселей
• Сила распространения тени коробки: -2 пикселя
• Цвет тени: # 171cff

2. Добавьте класс CSS в заголовок.

Откройте текстовый модуль №1 и щелкните вкладку «Текст».

Теперь, когда у нас есть все элементы дизайна, пришло время добавить расширенную текстовую анимацию к нашему заголовку. Откройте текстовый модуль, содержащий копию H1, и выберите текстовую вкладку.

Добавить CSS ID в тег H1

Внутри H1 добавьте собственный идентификатор CSS.

• ID = "headlineCopy"

3. Добавьте библиотеки надписей и аниме.

Добавить модуль кода в столбец

Для создания анимации мы используем библиотеки letterize.js и anime.js. Чтобы добавить эти библиотеки, вставьте новый модуль кода в столбец последней строки.

Добавить обе библиотеки

Затем добавьте два разных тега сценария, содержащие следующие источники, которые ведут обратно в библиотеки:

• src = ”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”
• src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

4. Добавьте код анимации

Анимация для письма на индивидуальном уровне

В последней части этого руководства мы собираемся добавить код анимации, который является частью библиотек letterize.js и anime.js. Чтобы добиться эффекта, который вы могли видеть в превью этого поста, мы собираемся применить два типа анимации. Первая анимация применяется к каждой букве индивидуально и последовательно. Это достигается с помощью библиотеки letterize.js. Эта библиотека в сочетании с первой частью кода ниже помещает каждую букву в вашей копии в отдельный промежуток. Таким образом, эти промежутки будут отдельно нацеливаться на протяжении всего процесса анимации. Убедитесь, что вы разместили приведенный ниже код между тегами скрипта.

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

Каждая функция добавления представляет собой анимацию на временной шкале анимаций. Эти анимации применяются к каждой букве на индивидуальном уровне. Вы можете изменять эти добавляемые функции по своему усмотрению, добавлять новые или удалять текущие, просто убедитесь, что последняя функция добавления закрыта правильно с помощью ';' в конце (как вы можете видеть в приведенном выше коде). Вы можете добавлять различные свойства CSS внутри этих дополнительных функций. Вы можете узнать больше о свойствах и о том, как они используются, в примерах документации anime.js. В этом руководстве мы специально добавили несколько анимаций, чтобы показать, как работает временная шкала, но вы, вероятно, захотите использовать что-то более тонкое или более короткое для своих собственных проектов.

Анимация для приговора

После того, как вы добавили первую часть анимации, которая нацелена на каждую букву индивидуально, мы перейдем ко второй части нашей анимации. Эта часть предназначена для всей копии в целом. Подход к анимации такой же, как указано выше; мы помещаем весь модуль в анимацию временной шкалы. Каждая функция добавления представляет собой отдельную анимацию внутри этой временной шкалы. Вы можете изменить эти добавленные функции, добавить новые или удалить текущие. Убедитесь, что вы разместили этот новый код перед окончанием кода сценария, как вы можете заметить на экране печати ниже.

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

Добавить собственный CSS для диапазона

Теперь, поскольку мы создали отдельный диапазон для каждой из наших букв, нам нужно изменить свойство отображения каждого диапазона, чтобы буквы отображались рядом друг с другом. Для этого мы добавим CSS-код в наш модуль кода. Убедитесь, что вы разместили код между тегами стиля.

#headlineCopy span {
display: inline-block;
}

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как создать расширенную текстовую анимацию для заголовка. Мы создали весь дизайн внутри Divi и объединили фреймворк с библиотеками letterize.js и anime.js. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже!

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.