Получить консультацию

Кратко о видео

В уроке разобраны шесть эффектов анимации: движение, масштабирование, поворот, наклон, непрозрачность и изменение размера. Для каждого — настройка начального и конечного значения, продолжительности и интерполяции. Показаны два триггера: при наведении (hover) и при клике. Важно: анимация при клике по умолчанию работает как переключатель — первый клик запускает «вперёд», второй — «назад». Для сброса в исходное состояние через другой элемент нужен контекстный селектор или MZ. Урок для новичков в анимациях Taptop. Теория CSS-transitions не нужна — интерфейс Taptop переводит всё в понятные параметры. После урока сможешь добавить базовые интерактивные эффекты на любой элемент без кода.

Как настроить анимацию при наведении и клике в Taptop

Хочешь анимацию при наведении и при клике — но не понимаешь, как это работает в Taptop. Где настраивается? Какие эффекты доступны? Может ли один клик анимировать несколько элементов?

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

Тайминги видео

00:00 — On hover и on click: два вида интерактивных анимаций 01:30 — Эффект движения: начало, конец, длительность, интерполяция 03:00 — Масштабирование, поворот, наклон 05:30 — Непрозрачность и размер 07:30 — Зацикливание, зеркальное зацикливание и пресеты 09:00 — Триггерный элемент: анимация одного объекта от клика на другом 11:00 — Кнопка с анимацией: overflow hidden + абсолютный блок 13:00 — Отключение анимации на планшетах и мобильных