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

Триггер При наведении (On hover) позволяет настроить анимацию, которая будет запускаться при наведении курсора мыши на элемент. Этим триггерным элементом может быть сам анимируемый элемент или любой другой элемент на странице — это можно задать в настройках анимации.

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

Триггерный элемент (Trigger element)

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

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

Когда может понадобиться изменить триггерный элемент

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

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

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

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

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

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

Пресеты

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

Проявление (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).

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

Эффекты (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)

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

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

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

Пример анимации при наведении

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

Для этого нужно добавить анимации при наведении у блока с фоном и у кнопки, а в качестве триггерного элемента выбрать блок с изображением. В настройках анимации нужно использовать эффект непрозрачности — от 0 до 100%. Тогда фон и кнопка будут изначально скрыты и станут видимыми только при наведении курсора на изображение.

Как это работает на практике, можно посмотреть вШаблоне лендинга цветочного магазинаизМаркетплейса Taptop.