Входная анимация
Первые впечатления прилипают. Вместо того, чтобы позволить вашему контенту просто появиться, сделайте его прибытием. The Входная анимация расширение добавляет движение любому элементу Elementor в тот момент, когда он прокручивается в поле зрения, с 70+ эффектов чтобы выбрать из: затухания, слайды, отскоки, перевороты и масштабирование. Вы устанавливаете скорость, задержку и смягчение, чтобы заголовок мог плавно входить, пока ряд значков функций входит один за другим. Нет CSS, нет ключевых кадров, всего несколько настроек на вкладке "Дополнительно".
Используйте его хорошо и входная анимация тянет глаз вниз по странице и делает сайт чувствовать себя живым на первом прокрутке. используйте его на все и он превращается в шум. видео ниже охватывает основы, и далее вниз я попадаю в полный список эффектов, как применить одну анимацию через целый раздел, и как получить время правильно.
Что такое входная анимация?
Входная анимация - это движение, которое элемент совершает, когда он попадает на экран. посетитель прокручивает, заголовок или изображение или кнопка попадает в окно просмотра, и он тускнеет, скользит или отскакивает на место вместо того, чтобы сидеть там все время. вы увидите их, называемые входными эффектами, анимацией прокрутки или анимацией входа на сайт. Каждый раз одна и та же идея: статическая страница, которая начинает реагировать, когда вы двигаетесь вниз по ней.
Вы можете написать все это самостоятельно с CSS анимации.Тогда ключевые кадры ваши для поддержания, и так же отзывчивое поведение на каждом размере экрана. Мастер Аддоны инструментарий анимации перемещает это в настройки элементов, поэтому вы выбираете эффект из раскрывающегося списка и пропускаете код.
Библиотека из более чем 70 входных эффектов
С более чем 70 предустановками, есть подходящий способ представить почти любой раздел Хотите, чтобы он был тихим? Fade In. Хотите энергии? Bounce или Rubber Band. После чего-то более преднамеренного? Flip или Slide.Этот спред удобен, потому что позволяет вам придать разделам их собственный характер: спокойный и плавный для формулировки миссии, немного игривый для строки функций.
- Затухает: Увядайте, увядайте, увядайте и все остальное для тихого прибытия.
- Слайды: элементы скользят слева, справа, сверху или снизу.
- Отскоки: Отскок и резиновая лента для секции, которую необходимо заметить.
- Вращения и перевороты: Переверните и поверните, когда вам нужна небольшая глубина.
- Масштабы и спецэффекты: Увеличение, скорость света и другие выдающиеся достижения героя или CTA.
- Сопоставьте эффект с работой: громкие - призыв к действию, мягкое затухание текста тела.
- Предварительный просмотр перед принятием обязательств: редактор воспроизводит анимацию, когда вы наводите на нее в списке.
Продолжительность, задержка и облегчение контроля
Тайминг - это место, где большинство анимаций выигрываются или проигрываются, и это больше, чем переключатель включения/выключения. Установите Продолжительность за миллисекунды сделать ход быстрым и резким или медленным и протяжным Добавить а Задержка так что ряд предметов входит один за другим, а не все сразу. Выберите Облегчение изгибайте так, чтобы движение ускорялось и замедлялось так, как это сделал бы реальный объект, а не скользило в ровном роботизированном темпе.
- Установить скорость: 500ms чувствует себя оживленно, 1500ms чувствует себя расслабленно, Что один номер меняет все настроение.
- Размещать последовательность: нажмите "Задержка" на выемку на каждом значке подряд, и они вставятся один за другим.
- Выберите смягчение: Ease-Out (быстрый старт, плавная остановка) для большинства входов считается естественным. Это тот, к которому я обращаюсь первым.
Как установить входную анимацию по умолчанию для всех элементов?
Люди спрашивают это много: можете ли вы применить одну входную анимацию ко всему сразу в Elementor? прямой ответ, Elementor ядро не имеет единого глобального переключателя, который оживляет каждый элемент на сайте. что работает на практике, так это анимировать на уровне контейнера или раздела, затем повторно использовать эти настройки.
- Выберите секция или контейнер вместо каждого виджета внутри него.Откройте Расширенный → Мастер-аддоны Входная анимация и выберите свой эффект. Затем весь блок складывается вместе, когда он прокручивается.
- Чтобы повторно использовать то же движение, щелкните элемент правой кнопкой мыши, нажмите Копировать, тогда Вставить Стиль на следующий раздел. настройки анимации едут вместе со стилем, поэтому вы устанавливаете его один раз и вставляете на страницу.
- Для каскада, а не для всего, что срабатывает вместе, сохраните эффект прежним и поднимите Задержка немного на каждом участке, когда вы спускаетесь вниз.
Это дает вам последовательную анимацию входа во все ваши элементы без прикосновения к коду, что так близко к умолчанию, как дает вам Elementor. полный Входная анимационная документация охватывает каждую настройку.
Где входные анимации помогают больше всего?
- Разделы героев: заголовок "Затухание вверх", затем небольшая задержка на кнопке под ним.
- Строки функций: раздвиньте иконы так, чтобы они приземлились один за другим.
- Статистика и счетчики: увеличение по мере прокрутки чисел.
- Отзывы и логотипы: мягкое выцветание, чтобы не защелкивались резко.
- Призывы к действию: отскок или резиновая лента в том месте, где кто-то решит.
Расширение поставляется с более широким Виджеты и расширения Master Addgets. страница ценообразования показывает, в каком плане он приземляется.
Часто задаваемые вопросы для входной анимации
Будет ли множество входных анимаций замедлять работу моего сайта?
На странице с десятками анимированных элементов он может добавить некоторый вес, но эффекты легкие для начала. настоящее исправление является сдержанность: анимировать ключевые разделы и заголовки, а не каждый абзац. несколько хорошо расположенных едва зарегистрироваться. если время загрузки на ваш ум, эти советы по ускорению сайтов Elementor помощь.
Почему моя анимация входа в Элементор не работает?
Обычно это одна из трех вещей. анимация запускается только в первый раз, когда элемент попадает в порт просмотра, поэтому прокрутите вниз свежим, чтобы проверить его, а не прокрутите обратно вверх. Убедитесь, что эффект воздействует на реальный элемент, а не на пустую обертку вокруг него. И очистите плагин кэширования после публикации, поскольку кэшированная страница будет обслуживать старую версию без анимации.
Могу ли я использовать различную анимацию на настольных и мобильных устройствах?
Нет. Вы не можете установить анимацию независимо для рабочего стола, планшета и мобильного телефона в Elementor. Какой бы эффект вы ни выбрали, он применим к каждой точке останова, поэтому выберите ту, которая по-прежнему выглядит правильно на маленьком экране.
Что такое настройка Easing и какую из них мне следует использовать?
Легкость контролирует темп движения.Linear удерживает одну постоянную скорость и может чувствовать себя роботизированным.Ease-Out начинается быстро и заканчивается медленно, как что-то катится к нежной остановке, что кажется естественным.Ease-In делает наоборот. для большинства входных анимаций, идти с Ease-Out.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
