Анимация входа в Элементор: 70 эффектов прокрутки для любого элемента
Первые впечатления прилипают. Вместо того, чтобы позволить вашему контенту просто появиться, сделайте его прибытием. The Входная анимация расширение, являющееся частью Master Addons Pro, добавляет движение любому элементу Elementor в тот момент, когда он прокручивается в поле зрения, с 70 эффектов чтобы выбрать из: затухания, слайды, маски, вращения, масштабирования, перевороты, импульсы и отскоки. вы устанавливаете продолжительность, задержку, ослабление и счетчик повторений, поэтому заголовок может плавно дрейфовать, пока ряд значков функций входит один за другим. Нет CSS, нет ключевых кадров, всего несколько настроек на вкладке "Дополнительно".
Используйте его хорошо и входная анимация тянет глаз вниз по странице и делает сайт чувствовать себя живым на первом прокрутке. используйте его на все и он превращается в шум. видео ниже охватывает основы, и далее вниз я попадаю в полный список эффектов, как применить одну анимацию через целый раздел, и как получить время правильно.
Что такое входная анимация?
Входная анимация - это движение, которое элемент совершает, когда он попадает на экран. посетитель прокручивает, заголовок или изображение или кнопка попадает в окно просмотра, и он тускнеет, скользит или отскакивает на место вместо того, чтобы сидеть там все время. вы увидите их, называемые входными эффектами, анимацией прокрутки или анимацией входа на сайт. Каждый раз одна и та же идея: статическая страница, которая начинает реагировать, когда вы двигаетесь вниз по ней.
Вы можете написать все это самостоятельно с CSS анимации.Тогда ключевые кадры ваши для поддержания, и так же отзывчивое поведение на каждом размере экрана. Мастер Аддоны инструментарий анимации перемещает это в настройки элементов, поэтому вы выбираете эффект из раскрывающегося списка и пропускаете код.
Библиотека из 70 входных эффектов
С 70 предустановками есть подходящий способ представить практически любой раздел Хотите, чтобы он был тихим? Fade In. Хотите энергии? Bounce In или Jack In the Box. После чего-то более преднамеренного? Flip In или Mask From.That spread позволяет вам придать разделам их собственный характер: спокойный и плавный для формулировки миссии, немного игривый для строки функций.
- Затухает: Затухание, плюс вверх, вниз, влево и вправо с пронумерованными вариациями для тихого прибытия.
- Горки и маски: Слайд От и Маска От во всех четырех направлениях.
- Вращения и перевороты: Поверните внутрь к каждому углу и переверните вверх, вниз, влево и вправо.
- Масштабы и масштабы: Увеличьте масштаб, масштабируйте и масштабируйте вниз, каждый с вариациями.
- Эффекты внимания: Включите, вытащите, встряхните, прыгните и Джек в коробке для героя или CTA.
- Сопоставьте эффект с работой: громкие - призыв к действию, мягкое затухание текста тела.
- Предварительный просмотр перед принятием обязательств: редактор воспроизводит эффект, как только вы его выбираете.
Продолжительность, задержка и облегчение контроля
Тайминг - это место, где большинство анимаций выигрываются или проигрываются, и это больше, чем переключатель включения/выключения. Установите Продолжительность за миллисекунды сделать ход быстрым и резким или медленным и протяжным Добавить а Задержка так что ряд предметов входит один за другим, а не все сразу. Выберите Облегчение изгибайте так, чтобы движение ускорялось и замедлялось так, как это сделал бы реальный объект, а не скользило в ровном роботизированном темпе.
- Установить скорость: 500ms чувствует себя оживленно, 1500ms чувствует себя расслабленно, Что один номер меняет все настроение.
- Размещать последовательность: нажмите "Задержка" на выемку на каждом значке подряд, и они вставятся один за другим.
- Выберите смягчение: Ease-Out (быстрый старт, плавная остановка) для большинства входов считается естественным. Это тот, к которому я обращаюсь первым.
- Повторите: Повторите счет воспроизводит эффект от 1 до 5 раз или в цикле.
Встроенная входная анимация Elementor против Master Addons
Элементор уже позволяет выбрать входную анимацию бесплатно в разделе "Дополнительно, эффекты движения". Это нормально для простого затухания. Расширение Master Addons предназначено для страниц, на которых вы хотите более точно контролировать, как поступает каждый элемент.
| Эффекты движения элементара | Мастер-аддоны входной анимации | |
|---|---|---|
| План | Бесплатно | Мастер Аддоны Про |
| Продолжительность | Медленно, нормально или быстро | Любое значение в миллисекундах |
| Задержка | Миллисекунды | Миллисекунды |
| Облегчение | Недоступно | 30 кривых, от линейного до обратного входа |
| Повторный подсчет | Недоступно | от 1 до 5 раз или бесконечно |
| Разный эффект на устройство | Да | Нет, одна настройка для всех точек останова |
| Эффекты | Пресеты Элементора | 70 эффектов, включая маски, перевороты и импульсы |
Как установить входную анимацию по умолчанию для всех элементов?
Люди спрашивают это много: можете ли вы применить одну входную анимацию ко всему сразу в Elementor? прямой ответ, Elementor ядро не имеет единого глобального переключателя, который оживляет каждый элемент на сайте. что работает на практике, так это анимировать на уровне контейнера или раздела, затем повторно использовать эти настройки.
- Выберите секция или контейнер вместо каждого виджета внутри него.Откройте Расширенный → Мастер-аддоны Входная анимация и выберите свой эффект. Затем весь блок складывается вместе, когда он прокручивается.
- Чтобы повторно использовать то же движение, щелкните элемент правой кнопкой мыши, нажмите Копировать, тогда Вставить Стиль на следующий раздел. настройки анимации едут вместе со стилем, поэтому вы устанавливаете его один раз и вставляете на страницу.
- Для каскада, а не для всего, что срабатывает вместе, сохраните эффект прежним и поднимите Задержка немного на каждом участке, когда вы спускаетесь вниз.
Это дает вам последовательную анимацию входа во все элементы без прикосновения к коду, что так близко к стандарту, как дает вам Elementor.
Где входные анимации помогают больше всего?
- Разделы героев: заголовок "Затухание вверх", затем небольшая задержка на кнопке под ним.
- Строки функций: раздвиньте иконы так, чтобы они приземлились один за другим.
- Статистика и счетчики: увеличение по мере прокрутки чисел.
- Отзывы и логотипы: мягкое выцветание, чтобы не защелкивались резко.
- Призывы к действию: отскок или Джек в коробке в тот момент, когда кто-то решит.
Входная анимация является частью Мастер Аддоны Про. Для движения за пределами первого свитка посмотрите на Плавающие эффекты, Раскрывать и Преобразует, или просмотреть все Функции анимации Master Addons.
Часто задаваемые вопросы для входной анимации
Будет ли множество входных анимаций замедлять работу моего сайта?
На странице с десятками анимированных элементов он может добавить некоторый вес, но эффекты легкие для начала. настоящее исправление является сдержанность: анимировать ключевые разделы и заголовки, а не каждый абзац. несколько хорошо расположенных едва зарегистрироваться. если время загрузки на ваш ум, эти советы по ускорению сайтов Elementor помощь.
Почему моя анимация входа в Элементор не работает?
Обычно это одна из трех вещей. анимация запускается только в первый раз, когда элемент попадает в порт просмотра, поэтому прокрутите вниз свежим, чтобы проверить его, а не прокрутите обратно вверх. Убедитесь, что эффект воздействует на реальный элемент, а не на пустую обертку вокруг него. И очистите плагин кэширования после публикации, поскольку кэшированная страница будет обслуживать старую версию без анимации.
Могу ли я использовать различную анимацию на настольных и мобильных устройствах?
Не с этим расширением. его настройки применяются к каждой точке останова, поэтому выберите эффект, который все еще выглядит прямо на маленьком экране. собственную анимацию входа в Motion Effects от Elementor можно установить для каждого устройства, что помогает, если макет телефона нуждается в чем-то более спокойном.
Чем это отличается от собственной входной анимации Элементора?
Свободный редактор Elementor имеет базовый контроль Entrance Animation под Advanced, Motion Effects, с заданной длительностью и задержкой Это расширение является частью Master Addons Pro и дает вам 70 эффектов, продолжительность и задержку в миллисекундах, 30 кривых смягчения и счетчик повторений Для темпа Ease Out подходит большинству входов.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
