arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобраны четыре эффекта анимации появления: движение (translate), масштабирование (scale), поворот (rotate), непрозрачность (opacity). Для каждого — настройка длительности, задержки и интерполяции (ease, ease-in, ease-out, linear). Показано, как комбинировать несколько эффектов на одном элементе. Анимация срабатывает, когда элемент входит в зону видимости при скролле. Режим «Повторять» включает анимацию каждый раз при входе в зону — без него она запускается один раз. Задержка (delay) — ключ к эффекту последовательного появления карточек в сетке. Урок для тех, кто уже разобрался с базовым интерфейсом Taptop и хочет добавить жизнь на страницу через анимации. Теория CSS-анимаций не нужна — всё настраивается через панель, без кода.

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

Хочешь, чтобы элементы появлялись при прокрутке — снизу вверх, с прозрачностью. Как настроить в Taptop? Анимация срабатывает один раз или каждый раз при появлении элемента на экране?
Анимации появления в Taptop срабатывают, когда элемент входит в область видимости при скролле. Режим повтора включает анимацию каждый раз. К одному элементу можно добавить несколько эффектов одновременно. Для тех, кто уже умеет верстать в Taptop. После просмотра создаёшь эффекты появления для любых элементов на странице.
Тайминги видео
00:00 — Триггер «появление на экране» и режим повтора 01:30 — Пресеты: проявление, увеличение, скольжение 02:30 — Эффект движения: начало, конец, длительность, интерполяция, задержка 05:00 — Масштабирование, поворот, непрозрачность 07:30 — Многошаговая анимация с задержками — эффект прыжка 10:00 — Копирование анимации на другой элемент 11:30 — Адаптив: отключение на мобильных, изменение параметров по брейкпоинту 13:30 — Итоговый результат: анимации на трёх секциях лендинга

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока