Записывайтесь на бесплатный онлайн-интенсив «Верстка для дизайнеров и фрилансеров» в 19:00 мск
Записаться
Вернуться к продуктам
Кратко о видео
Хочется добавить на сайт эффектный горизонтальный скролл, но непонятно, как связать обычную прокрутку страницы с движением контента в сторону. При создании такого эффекта важно правильно подготовить структуру, рассчитать смещение и настроить адаптацию под разные экраны.
В уроке Вадим покажет, как создать горизонтальный скролл в Taptop: подготовить секцию, настроить элементы, добавить scroll-анимацию и адаптировать её под устройства. После просмотра ты сможешь создавать интерактивные секции с горизонтальным движением в своих проектах.
Как сделать горизонтальный скролл в Taptop
Хочется добавить на сайт эффектный горизонтальный скролл, как в современных промо-сайтах, но непонятно, как он работает. Пользователь скроллит страницу вниз, а контент неожиданно движется в сторону — как связать эти два действия?
При создании такого эффекта появляются вопросы: какие элементы нужно подготовить? Где настроить движение? Как рассчитать нужное смещение контента? Как сделать так, чтобы анимация корректно работала на разных устройствах?
Горизонтальный скролл помогает создавать необычные интерактивные секции и удерживать внимание пользователя. После урока ты сможешь собрать такой эффект в Taptop, настроить анимацию и адаптировать её под разные экраны.
В этом уроке курса «Продвинутые анимации» Вадим разберёт, как создать эффект горизонтального скролла в Taptop и связать вертикальное движение страницы с перемещением контента в сторону.
Ты узнаешь, как подготовить структуру секции, настроить необходимые элементы, добавить scroll-анимацию и определить правильное смещение для плавного движения. Также разберём адаптацию эффекта под разные устройства и несколько вариантов реализации горизонтального скролла.
После просмотра ты сможешь создавать сложные интерактивные секции с горизонтальным движением без использования дополнительного кода.
Тайминги видео
00:00 — Введение
00:23 — План урока
00:50 — Разбор механики горизонтального скролла
04:25 — Настройка элементов для горизонтального скролла на примере первой секции (Теория «Горизонтальный скролл»)
10:25 — Настройка элемента Content
11:48 — Добавление анимации горизонтального скролла
14:22 — Как определить, насколько нужно сместить контент для корректной работы анимации
16:11 — Как убрать горизонтальный скроллбар
16:43 — Адаптация анимации
22:30 — Варианты реализации горизонтального скролла
24:45 — Обзор секции для практической вёрстки (Практика «Горизонтальный скролл»)
