arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана механика параллакса: замена background-image на виджет Image в div с абсолютным позиционированием, настройка 100% ширины и высоты, скрытие переполнения у родителя (overflow: hidden), подключение анимации при скролле через раздел «Анимации скролла». Параллакс работает только с виджетом Image — фоновое изображение секции не поддерживает анимацию по скроллу. Image нужно обернуть в div с absolute позиционированием, а у родителя поставить overflow: hidden — иначе изображение будет вылезать за пределы блока при скролле. Урок для тех, кто знает базовую вёрстку в Taptop и хочет добавить кинетический эффект глубины на hero-секцию или блок с фоновым изображением. Понимание абсолютного позиционирования нужно как предварительная база.

Как сделать параллакс фонового изображения

Хочешь параллакс: фоновое изображение движется медленнее основного контента при прокрутке. Попытка сделать это через фон секции — не работает. Почему и как правильно?
Параллакс работает только с виджетом Image, не с фоном секции. Image оборачивается в div с абсолютным позиционированием и 100% шириной и высотой. Анимация — триггер «трансформация по скроллу» с движением по Y. Для всех. После просмотра делаешь эффект параллакса для любого изображения на странице.
Тайминги видео
00:00 — Меня часто спрашивают, как сделать паралакс 00:55 — а не использовать фон. Давай для 01:52 — нужно добавить анимацию для самой картинки 02:44 — ещё с настройками смещения. Например, если

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

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