Как добавить анимацию при прокрутке в Elementor (например, Apple AirPods)

Опубликовано: 2022-07-21

Ищете способ добавить анимацию при прокрутке в Elementor, как Apple и Sony используют на своих веб-сайтах?

Хотя Elementor Pro включает в себя все виды изящных анимационных эффектов с помощью функции «Эффекты движения», он не позволяет вам создавать действительно привлекательную последовательность изображений с эффектами прокрутки, подобные тем, которые вы видите на веб-сайте Apple (плюс множество других). Например, страница AirPods Pro .

С помощью плагина Scrollsequence вы можете легко добавить эти типы кинематографической анимации прокрутки в Elementor ( включая бесплатную версию Elementor ).

Это сложно описать словами, поэтому посмотрите пример ниже ( анимация движется, когда посетитель прокручивает страницу вниз ):

Если вы хотите узнать больше о Scrollsequence в целом, вы можете прочитать наш полный обзор Scrollsequence.

Однако в этом посте мы специально сосредоточимся на том, как добавить анимацию при прокрутке в Elementor с помощью Scrollsequence.

Давайте копать!

Как создать кинематографическую анимацию прокрутки в Elementor с помощью Scrollsequence

Вот общий взгляд на необходимые шаги — продолжайте читать для подробного руководства:

Установите плагин Scrollsequence.
Создайте свою анимацию
Добавьте анимацию прокрутки в Elementor

1. Установите плагин Scrollsequence

Для начала вам нужно установить плагин Scrollsequence на свой веб-сайт Elementor.

У Scrollsequence есть бесплатная версия на WordPress.org, а также премиум-версия с дополнительными функциями. Бесплатная версия позволяет настроить базовую анимацию с использованием до трех сцен и до 100 изображений на сцену, в то время как премиум-версия снимает все ограничения, а также добавляет более продвинутые анимации и функции.

Scrollsequence — плагин для кинематографической анимации прокрутки изображения

Автор(ы): Scrollsequence

Текущая версия: 1.2.7

Последнее обновление: 9 мая 2022 г.

scrollsequence.1.2.7.zip

98% оценок Более 1000 установок Требуется WP 5.0+

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

Если вы решите, что вам нужна премиум-версия после пробной версии, она начинается с 69,99 долларов. Однако вы можете использовать наш эксклюзивный купон Scrollsequence, чтобы сэкономить 20%:

СКИДКА В 20

Scrollsequence

Получите эксклюзивную скидку 20% на Scrollsequence с купоном WPMAYOR20. Создайте свою анимацию прокрутки за считанные минуты.

Получите эксклюзивную скидку 20% на Scrollsequence с купоном WPMAYOR20. Создайте свою анимацию прокрутки за считанные минуты. Показывай меньше

2. Создайте свою анимацию

После того, как вы установили плагин, перейдите в Scrollsequence → Add New Scrollsequence , чтобы настроить свою первую анимацию прокрутки.

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

«Сцена» — это одна полная анимационная последовательность. Если вы решите добавить несколько сцен, пользователь перейдет к следующей сцене после того, как полностью прокрутит анимацию первой сцены.

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

Создание сцен и добавление изображений

После того, как вы создали высокоуровневую анимацию, нажмите кнопку « Добавить сцену» , чтобы добавить свою первую сцену.

Это расширит новый набор параметров, которые позволят вам загружать все изображения для вашей последовательности анимации. Разработчики рекомендуют загружать не менее 50-100 изображений на сцену, чтобы обеспечить плавную анимацию.

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

Добавьте изображения на сцену, чтобы создать анимацию при прокрутке в Elementor

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

Добавить фиксированный контент и анимацию

Чтобы добавить фиксированное содержимое, которое появляется поверх анимационных изображений, вы можете использовать поле « Фиксированное содержимое » для самого содержимого.

Затем вы можете использовать раздел « Анимация фиксированного содержимого », чтобы настроить правила анимации. Мы подробно рассмотрим это в шаге № 4 нашего обзора Scrollsequence, но основная идея заключается в следующем:

Вы добавляете селекторы CSS к содержимому в поле « Фиксированное содержимое » (используя вкладку « Текст »).
Вы настраиваете свои правила анимации в поле « Анимация фиксированного содержимого », ориентируясь на эти селекторы CSS, а затем также выбирая время для анимации содержимого в этих селекторах. Например, вы можете сказать, что хотите показать определенный текст для изображений 30-55.

Вот пример добавления селекторов CSS к вашему контенту:

А вот как выглядит настройка правил анимации:

Анимируйте контент по мере необходимости

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

Настройте другие параметры по мере необходимости

Настройка ваших сцен, изображений и фиксированного контента — самые важные части создания анимации.

Однако Scrollsequence также дает вам некоторые другие настройки в этом интерфейсе, которые вы, возможно, захотите изучить.

Например, вы можете настроить масштаб изображения и выравнивание в нижней части области настроек сцены.

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

Опубликуйте свою анимацию

Чтобы закончить, нажмите кнопку « Опубликовать », чтобы опубликовать свою анимацию, как если бы вы делали запись в блоге.

Как только вы опубликуете его, вы сможете найти шорткод этой анимации, перейдя в Scrollsequence → Scrollsequence :

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

3. Добавьте анимацию прокрутки в Elementor

Как только вы будете довольны своей анимацией прокрутки, вы готовы добавить ее в свой дизайн Elementor.

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

Для начала запустите редактор Elementor для фрагмента контента, в который вы хотите добавить анимацию прокрутки.

Затем, вот как добавить анимацию прокрутки:

Добавьте виджет Elementor Shortcode, где вы хотите, чтобы анимация прокрутки отображалась.
Вставьте шорткод анимации ( опять же, вы можете найти его, перейдя в Scrollsequence → Scrollsequence ) .
Нажмите кнопку « Применить » в настройках виджета «Шорткод», чтобы Elementor сгенерировал предварительный просмотр вашей анимации в редакторе.

Добавьте шорткод анимации в редактор Elementor.

Вы можете испытать полную анимацию, не выходя из редактора Elementor — просто прокрутите вниз в визуальном предварительном просмотре!

Вот и все — вы только что узнали, как настроить кинематографическую анимацию прокрутки в Elementor, как это делает Apple со многими своими целевыми страницами.

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

Создайте свой первый Elementor при анимации прокрутки сегодня

Люди любят Elementor из-за гибкости, которую он дает вам, когда дело доходит до создания вашего дизайна.

Тем не менее, одна вещь, которую Elementor не может сделать сама по себе, — это настроить типы кинематографической анимации при прокрутке, которые вы видите от Apple и других.

Объединив Elementor с Scrollsequence, вы можете легко добавлять эти типы анимации в свои проекты Elementor.

Если вы хотите попробовать, у вас есть два варианта:

Просто используйте бесплатную версию Scrollsequence на WordPress.org.
Воспользуйтесь 14-дневной бесплатной пробной версией, чтобы получить доступ ко всем премиальным функциям Scrollsequence.

Если вы решите использовать премиальную версию Scrollsequence, вы можете использовать наш эксклюзивный купон Scrollsequence, чтобы сэкономить 20% на вашем заказе.

СКИДКА В 20

Scrollsequence

У вас все еще есть вопросы о том, как добавить анимацию при прокрутке в Elementor? Дайте нам крик в разделе комментариев и дайте нам знать, что у вас на уме.

Как добавить анимацию при прокрутке в Elementor (например, Apple AirPods)

Как создать кинематографическую анимацию прокрутки в Elementor с помощью Scrollsequence

1. Установите плагин Scrollsequence

20i Хостинг WordPress

Подробности

Астра

Подробности

Астра День Рождения Распродажа

Подробности

Автонами

Подробности

Авада

Подробности

Сарай2

Подробности

Бобровый Строитель

Подробности

Блюхост

Подробности

Бесплатный домен с Bluehost

Подробности

Бюллетень

Подробности

Элементор Про

Подробности

EngineThemes

Подробности

Основной плагин

Подробности

Пронто все-в-одном

Подробности

сурок

Подробности

Ростовщик

Подробности

Человеческое присутствие

Подробности

IconicWP

Подробности

IconicWP

Подробности

Кбакет

Подробности

Язык

Подробности

Жидкая паутина

Подробности

Жидкая паутина

Подробности

Видео виджет Magnifi

Подробности

Основные аддоны для Elementor

Подробности

Информационный бюллетень Клей

Подробности

Уведомление Х

Подробности

OceanWP

Подробности

Доступно для заказа

Подробности

Выход из воронки

Подробности

Страница оплаты

Подробности

ПипСо

Подробности

Быстрый

Подробности

Scrollsequence

Подробности

МагазинГотово

Подробности

Прожектор PRO

Подробности

Звездная распродажа

Подробности

Звездная распродажа

Подробности

Трипетто Про