Страница, где все просто сидит там, читается как PDF. Страница, на которой разделы легко проникают, когда вы доходите до них, кажется построенной. Входная анимация расширение в Мастер-аддоны для Elementor добавляет это движение к любому элементу: выберите эффект из библиотеки из 70 анимаций, установите время, и элемент оживит момент прокрутки в поле зрения. Это часть Master Addons Pro, и Расширение входной анимации Elementor на странице показано, как он соотносится со встроенным вариантом Elementor.
Вот эффект на реальной странице. каждый раздел затухает и поднимается по мере входа в окно просмотра:
Что делает расширение Entrance Animation #
После включения каждый элемент Elementor получает an Входная анимация раздел под Продвинутый вкладка Назначьте анимацию там, и элемент начнет скрываться, затем воспроизводит свой эффект, когда посетитель прокручивает к нему Разделы, контейнеры, заголовки, изображения, кнопки: все в редакторе может нести свой вход.
Библиотека анимации охватывает весь спектр стилей входа:
- Увядать семейство: простой, вниз, вверх, влево и вправо, каждый с пронумерованными вариациями, изменяющими расстояние перемещения.
- Слайд От Вправо, влево, вверху и внизу.
- Маска От Верх, низ, левый и правый, которые стирают элемент.
- Вращать В варианты "Вниз" и "Вверх" в каждом углу.
- Увеличить масштаб и Масштабирование вверх/Масштабирование вниз семьи для глубины.
- Перевернуть Вверх, вниз, влево и вправо плюс Вводить, Выталкивать, Шейк, Подпрыгиватьи Джек в коробке.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- Активный Мастер Аддоны Про лицензия, поскольку Entrance Animation является расширением Pro.
Как включить расширение Entrance Animation #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка Входная анимация ведет Виджеты анимации группа с Горячим значком, рядом с Трансформы и Раскрыть. Нажмите его тумблер так он становится фиолетовый, затем удар Сохранить изменения и дождитесь зеленого “Настройки успешно сохранены” уведомление.
Выберите анимацию для элемента #
Выберите элемент в редакторе Elementor, откройте Продвинутый вкладка и разверните Входная анимация раздел с фиолетовым значком МА. The Анимация раскрывающийся список содержит всю библиотеку. В демо-версии раздел героев получает эффект затухания, а раскрывающийся список показывает группы затухания, слайда, маски, вращения, масштабирования и масштабирования, прокручивающиеся мимо.
Выберите один, и редактор немедленно его просмотрит, чтобы вы могли пролистывать параметры, пока движение не подойдет к содержанию. Fade In Up - это безопасный вариант по умолчанию: тонкий подъем, отсутствие драмы, работает практически над чем угодно.
Настройте время #
Под раскрывающимся видео Animation расположены четыре элемента управления синхронизацией.
- Продолжительность (мс): сколько длится анимация В демо используется преувеличенные 5000ms, поэтому движение легко увидеть; на производственных страницах обычно кажется правильным от 400 до 800ms.
- Задержка (мс): пауза перед началом эффекта, 400ms в демо-версии.Stagger задерживает элементы брата или сестры, и они входят один за другим, а не все сразу.
- Упрощение: кривая ускорения. по умолчанию работает, но для входов более естественно приземляется легкость.
- Повторить счет: сколько раз играет эффект, от 1 до 5, или бесконечный.
Результат на странице #
Публикация и прокрутка. каждый элемент держится до тех пор, пока не войдет в окно просмотра, затем воспроизводит свой вход: список функций поднимается на место, карты обслуживания исчезают в виде ряда, а раздел команды следует, когда вы доберетесь до него. GIF анимации в верхней части этой страницы показывает точную последовательность с демо-сайта.
Одно предостережение от практики: анимировать разделы, не каждый виджет внутри них Страница, где пятьдесят элементов каждый прилетает откуда-то, читается как шум Один вход в раздел держит ритм.
Где хорошо работают входные анимации #
- Разделы Героя. Заголовок с затуханием задает тон в момент загрузки страницы.
- Строки функций. Карты, которые поднимаются последовательно, с использованием шахматных задержек.
- Статистика и счетчики. Движение привлекает внимание, когда цифры прокручиваются в поле зрения.
- Отзывы. Цитаты, которые легко читать, представляют собой моменты, а не стену текста.
- Длинные целевые страницы. Каждый объявляющий о себе раздел продолжает прокручивать импульс.
Видео Учебник #
Посмотрите анимацию в движении, начиная с включения расширения и заканчивая готовой страницей.
Часто задаваемые вопросы #
Как добавить анимацию входа в Elementor?
Включите расширение Entrance Animation на вкладке Расширения главных дополнений, выберите любой элемент в редакторе и откройте Entrance Animation на вкладке Дополнительно Выберите эффект из раскрывающегося списка Анимация, установите продолжительность и задержку, и элемент будет анимироваться при прокрутке в поле зрения.
Какие анимации включены в расширение?
70 эффектов: затухание (вверх, вниз, влево и вправо, с вариациями), слайд от и маска от во всех четырех направлениях, вращение внутрь к каждому углу, увеличение, масштабирование вверх и масштабирование вниз, переворачивание, втягивание и выталкивание, встряхивание, впрыгивание и Джек в коробке. каждый работает с разделами, контейнерами и отдельными виджетами.
Когда играет входная анимация?
Когда элемент входит в viewport Элементы над сгибом анимируют при загрузке страницы, и все дальше вниз ждет, пока посетитель прокрутит его. Настройка Задержка добавляет паузу перед началом эффекта, как вы шатаете ряд карт.
Могу ли я контролировать скорость анимации?
Да. продолжительность устанавливает длину эффекта в миллисекундах, Задержка откладывает его начало, Упрощение формирует кривую ускорения, и Повторить счетчик воспроизводит ее Продолжительность от 400 до 800 мс с коротким шагом между элементами покрывает большинство конструкций.
Расширение Entrance Animation бесплатное?
No. Entrance Animation входит в состав Master Addons Pro. У свободного редактора Elementor есть своя базовая анимация входа в Advanced, Motion Effects, с заранее заданной длительностью и задержкой.
Завершая #
The Расширение входной анимации дает каждому элементу Элементор вход, запускаемый с помощью прокрутки: один раскрывающийся для эффекта, четыре поля для синхронизации. сохраняйте продолжительность ниже секунды, распределяйте задержки и анимируйте на уровне раздела, и страница кажется преднамеренной, а не украшенной. Для движения, которое реагирует на курсор, а не на прокрутку, посмотрите на Расширение плавающих эффектов, и полный список Виджеты и расширения Master Addgets имеет остальное.
