Анимация по триггеру «Появление на экране»

Триггер Появление на экране позволяет настроить анимацию, которая будет срабатывать при появлении элемента на экране.

Видео: Анимация по триггеру «Появление на экране»

Настройки для анимации по триггеру «Появление на экране»

Начало (Start)

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

При выборе параметра «Половина элемента появилась во вьюпорт» старт анимации будет происходить в момент появления середины элемента на экране.

При выборе параметра «Элемент полностью появился во вьюпорт» старт анимации будет происходить в момент, когда элемент полностью появится в границах видимой пользователю области страницы.

Повтор (Replay)

Настройка отвечает за воспроизведение анимации при повторном появлении элемента на экране. По умолчанию данный параметр выключен — анимация сработает только при первом появлении элемента на экране.

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

Зацикливание (Loop)

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

Зацикливание по кругу (Loop) - после окончания анимации ее воспроизведение начнется заново с первого кадра.

Зеркальное зацикливание (Loop with reverse) - после окончания анимации ее воспроизведение начнется в обратном направлении.

Пресеты (Presets)

Вы можете выбрать один из предустановленных пресетов — это добавит набор эффектов с уже заданными настройками. Для триггера appear on screen доступны следующие виды пресетов:

Проявление (Fade In)

Увеличение (Scale In)

Увеличение снизу (Scale In Bottom)

Отражение по горизонтали (Flip Horizontal)

Отражение по вертикали (Flip Vertical)

Скольжение вверх (Slide In From Top)

Скольжение влево (Slide In From Left)

Скольжение вправо (Slide In From Right)

Скольжение вниз (Slide In From Bottom)

Пользовательский (Custom)

По умолчанию при добавлении триггера для анимации в настройках пресетов установлен параметр проявление (Fade In).

Эффекты (Effects)

Эффекты отвечают за то, какие действия будут происходить с элементом при появлении на экране. Чтобы добавить эффект, нажмите на «+» справа.

Для настройки доступны 11 эффектов:

Движение (Move) — позволяет передвигать элемент по оси X, Y и Z.

Масштабирование (Scale) — позволяет масштабировать (увеличивать или уменьшать) размеры элемента в пределах от 0 до 100% (значения от 0 до 1) или более 100% (значения больше 1).

Поворот (Rotate) — позволяет поворачивать элемент по оси X, Y и Z.

Наклон (Skew) — позволяет наклонять элемент по оси X и Y.

Непрозрачность (Opacity) — позволяет менять непрозрачность элемента от 0 (полностью невидимый) до 100% (полностью видимый) или наоборот (от видимого к невидимому).

Размер (Size) — позволяет менять размер элемента по ширине и высоте.

Цвет шрифта (Text Color) — позволяет менять цвет текста.

Цвет фона (Background Color) — позволяет менять цвет фона.

Ширина границы (Border Width) — позволяет менять ширину границы.

Закругленные углы (Radius) — позволяет менять радиус одного или нескольких углов.

Цвет границы (Border Color) — позволяет менять цвет границы.

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

Для эффектов доступны следующие настройки:

Начало (Start) и Конец (End)

Настройка позволяет задать значение параметров эффекта в начале и в конце анимации.

Время (Timing)

Можно установить длительность анимации и задержку начала эффекта в секундах.

Интерполяция (Easing)

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

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

Брейкпоинты (Breakpoints)

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

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

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