Как перезапускать анимацию каждый раз, когда вы прокручиваете мимо элемента с помощью Divi и GSAP

Когда дело доходит до анимации элементов на вашей странице, вы, скорее всего, захотите активировать анимацию элемента, когда он войдет в область просмотра. Благодаря встроенным настройкам анимации Divi, как только этот элемент появится в поле зрения и будет анимирован, он останется статичным до тех пор, пока вы не перезагрузите всю страницу. В некоторых случаях вы можете искать более последовательный подход, при котором ваша анимация перезапускается с каждой записью окна просмотра. Это поможет вам упростить работу посетителей с вашим сайтом. В этом руководстве мы покажем вам, как именно это сделать, используя Divi, GSAP и ScrollTrigger для GSAP. Как только вы получите подход, вы сможете применить его к любому элементу на вашей странице. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

Скачать макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Создать дизайн сечения

Добавить раздел заполнителя

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

Размеры

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

• Высота: 100vh

Клонировать раздел заполнителя

Затем клонируйте раздел один раз.

Добавить новый раздел между разделами-заполнителями

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

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2
• Ширина: 90%
• Максимальная ширина: 2080 пикселей

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

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

Затем добавьте в столбец первый текстовый модуль и включите контент по вашему выбору.

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

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

• Шрифт текста: Монтсеррат
• Толщина шрифта текста: толстый
• Стиль шрифта текста: прописные.
• Цвет текста: # f9f9f9
• Размер текста:
  • Рабочий стол: 150 пикселей
  • Планшет и телефон: 11vw
• Высота текстовой строки: 1,1 мкм
• Выравнивание текста: по центру

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

Добавить контент H2

Добавьте еще один текстовый модуль под предыдущим и включите контент H2.

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

Оформите текст H2 следующим образом:

• Шрифт заголовка 2: Montserrat
• Выравнивание текста заголовка 2: по центру
• Размер текста заголовка 2:
  • Рабочий стол: 80 пикселей
  • Планшет и телефон: 10vw

Размеры

Также добавьте ширину 100%.

• Ширина: 100%

Позиция

И переместите весь модуль на расширенной вкладке.

• Позиция: Абсолютная
• Расположение: Центр

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2
• Ширина: 90%
• Максимальная ширина: 2080 пикселей

Столбец 1 Настройки

Затем откройте настройки столбца 1.

Фоновая картинка

Загрузите фоновое изображение по вашему выбору.

• Размер фонового изображения: обложка
• Положение фонового изображения: по центру

Интервал

Затем измените настройки расстояния между столбцами.

• Верхний отступ: 100 пикселей
• Нижняя обивка:
  • Рабочий стол: 400 пикселей
  • Планшет и телефон: 200 пикселей
• Левый отступ: 5,5%
• Правое заполнение: 5,5%

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

Добавить контент H4

Затем добавьте текстовый модуль в столбец 1 с некоторым содержанием H4.

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

Примените соответствующий стиль к тексту H4:

• Шрифт заголовка 4: Lato
• Толщина шрифта заголовка 4: жирный
• Стиль шрифта заголовка 4: прописные.
• Размер текста заголовка 4: 13 пикселей
• Заголовок 4 Расстояние между буквами: 2 пикселя

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

Добавить контент H3

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

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

Соответственно измените настройки текста H3:

• Шрифт заголовка 3: Montserrat
• Размер текста заголовка 3: 36 пикселей
• Расстояние между заголовками 3 букв: 1 пиксель
• Высота строки заголовка 3: 1,2 м

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

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

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

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

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

• Шрифт текста: Lato
• Цвет текста: # 4c4c4c
• Расстояние между буквами текста: 0,5 пикселей
• Высота текстовой строки: 2em

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

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

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

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

Стиль кнопки на вкладке дизайна.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 14 пикселей
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000
• Ширина границы кнопки: 0 пикселей

• Шрифт кнопки: Lato
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Повторное использование столбца 1

Удалить столбцы 2 и 3

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

Клонировать столбец 1 дважды

И повторно используйте столбец 1, дважды клонировав его.

Изменить повторяющиеся фоновые изображения столбца

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

Изменить содержимое в повторяющихся столбцах

Вместе с содержимым модуля.

Добавить Transform Translate to Column 2 Settings

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

• Левый:
  • Рабочий стол: 50 пикселей
  • Планшет и телефон: 0 пикселей

2. Примените к дизайну технику перезапуска анимации.

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

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

• Класс CSS: строка-анимации-триггера

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

Класс CSS, который мы добавили на предыдущем шаге этого руководства, поможет нам настроить таргетинг на все модули внутри этой строки сразу. Чтобы создать анимацию перезапуска, мы используем код JQuery, библиотеку GSAP JavaScript и библиотеку ScrollTrigger для GSAP. Чтобы добавить этот код, мы вставим новый модуль кода под вторым текстовым модулем в строке №1.

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

Убедитесь, что вы добавили библиотеки GSAP и ScrollTrigger в новые теги скрипта.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Добавить новые теги сценария

Затем добавьте новые теги сценария под тегами сценария библиотеки.

Добавить функцию GSAP + ScrollTrigger

Внутри новых тегов скрипта мы скопируем и вставим следующие строки кода JQuery:

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

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Этот код будет нацелен на все модули строк сразу и перезапустит анимацию, как только посетитель снова войдет в область просмотра. Анимация в данном случае довольно проста и минимальна. Однако с помощью GSAP и ScrollTrigger вы можете создавать любую анимацию, какую захотите, так что на нее определенно стоит обратить внимание!

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

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

Рабочий стол

Мобильный

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

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

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