Как анимировать текст с помощью Animate.js и Letterize.js в Divi

Blair Jersyer Учебные пособия по WordPress Dec 15, 2020

DIVI предлагает массу возможностей для анимации, когда дело доходит до придания динамизма веб-сайту. Однако вы можете добавлять эти анимации в контейнер только один раз. Если для какой-то анимации этого вполне достаточно, вовремя, вы можете быстро найти это ограниченным. Например, иногда вы можете захотеть добавить более одной текстовой анимации, и это то, что мы рассмотрим сегодня, используя текстовый модуль Letterize.js и Animate.js, которые представляют собой библиотеки javascript, которые предоставляют CSS-анимацию элементам DOM. При таком подходе вы сможете создавать такую ​​анимацию с любым другим модулем Divi.

Давайте начнем.

Возможный конечный результат

Вот возможный результат, которого мы можем достичь в конце урока.

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

Мы начнем с создания большого раздела, также называемого «Раздел героя», и добавим к нему уникальный раздел.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

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

Spacing

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

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

Добавить одну строку

Single Column Structure

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

Configure Spacing

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

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

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

Add H1 Copy

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

H1 Text Settings

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

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

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

Column Structure

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

Sizing

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

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

Spacing

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

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

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

Upload An Illustration

Затем давайте добавим модуль изображения и загрузим иллюстрацию по вашему выбору. Это должно выглядеть как фоновая иллюстрация.

Sizing

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

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

Spacing

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

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

Animation

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

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

Добавьте третью строку

Define The Column Structure

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

Spacing

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

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

Box Shadow

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

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

Animation

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

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

Добавить текстовый модуль в третью строку

Provide Content

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

Text Settings

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

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

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

Provide Text

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

Button Settings

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

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

Spacing

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

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

Box Shadow

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

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

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

Откройте первый текстовый модуль и щелкните вкладку текста

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

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

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

  • ID = "заголовок-копия"

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

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

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

Включить обе библиотеки

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

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

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

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

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

jQuery(function ($) {
   $(document).ready(function () {
          var headlineCopy = new Letterize({
          targets: "#headline-copy"
       });
       var animation = anime.timeline({
          targets: headlineCopy.listAll(),
          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',
      });
   });
});

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

Вы можете добавлять различные свойства CSS внутри этих «добавляющих» функций. Вы можете узнать больше о свойствах и о том, как они используются в Примеры документации anime.js.

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

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

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

anime.timeline({loop: false}) 
   .add({targets: '#headline-copy',lineHeight: '1em',delay: '1500' }) 
   .add({targets: '#headline-copy',translateX: ['-5%', 0],letterSpacing: '-2px',});

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

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

#headline-copy span {display: inline-block;}

Финальный просмотр

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

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

Итак, в этой публикации мы показали вам, как создавать текстовую анимацию для заголовка. Мы создали весь дизайн внутри Divi и объединили фреймворк с библиотеками Letterize.js и Anime.js. Вы протестируете эту анимацию в своем блоге? У вас есть другие анимации, которыми вы можете поделиться с нами? Дайте нам знать.

Divi WordPress Theme