[Фича 11] Замена элементов при скролле (анимация)

Привет, бандиты! Сегодня мы сделаем не очень сложный, но очень крутой эффект. Возьмём три элемента, которые будут меняться при скролле страницы.

Эффект круто подойдёт при разработке экранов продукции, презентации и многих других тематиках. Этот урок - мастхэв. Приятного изучения!

Создаём Zero Block и загружаем материалы

Материалы - три мокапа айфонов. Я их прикреплю под постом данного урока. Создаём Zero Block на 3000 пикселей по высоте. Я установил фон цвета #fccf19

Как будет работать анимация?

Как я уже говорил, всю сложную анимацию нужно делить на шаги. Сейчас этим и займёмся.

Шаг 1. Изображение скроллится на 400 пикселей вниз (фикс)

Шаг 2. Изображение пропадает (уменьшается параметр прозрачности)

Шаг 3. Следующее изображение скроллится на 400 пикселей вниз

Шаг 4. Второе изображение пропадает

Шаг 5. Аналогичные действия и 3,4,5 изображением и так далее.

Добавляем объекты на экран

Добавляем три изображения на экран. Важно! Все изображения должны быть одинакового размера, чтобы мы могли их наложить один на другой!

Работаем с первым изображением

Открываем пошаговую анимацию.

EVENT: on scroll (действие выполняется при скролле страницы)

Start trigger: on window top (с верху страницы)

Триггер поставим на 40 пикселей от верха страницы

Добавляем первый шаг.

Distance: 400 пикселей - изображение фиксируется и остаётся неизменным на протяжении 400 пикселей прокрутки страницы

Fix: fixed - изображение зафиксировано

Добавляем второй шаг.

Distance: 50 пикселей - пролетев еще 50пх изображение изменяется

Opacity: 0 - прозрачность падает - изображение исчезает.

Изображение сначала спускается на 250 пикселей, потом на протяжениии 50 пикселей у него теряется прозрачность.

Работаем со вторым изображением

Второе изображение у нас должно пролететь параллельно с первым, потом пролететь ещё 250 пикселей и исчезнуть ещё через 50пх.

Открываем пошаговую анимацию.

EVENT: on scroll (действие выполняется при скролле страницы)

Start trigger: on window top (с верху страницы)

Триггер поставим на 40 пикселей от верха страницы

Первый шаг:

Distance: 1300 пикселей - изображение фиксируется и остаётся неизменным на протяжении 50 пикселей прокрутки страницы

Fix: fixed - изображение зафиксировано

Второй шаг:

Distance: 50 пикселей - пролетев еще 50пх изображение изменяется

Opacity: 0 - прозрачность падает - изображение исчезает.

Работаем с третьим изображением

Третье у нас пролетит дальше чем второе, опять же на 400 пикселей, исчезнет через 50 пикселей.

Открываем пошаговую анимацию.

EVENT: on scroll (действие выполняется при скролле страницы)

Start trigger: on window top (с верху страницы)

Триггер поставим на 40 пикселей от верха страницы

Первый шаг:

Distance: 850 пикселей - изображение фиксируется и остаётся неизменным на протяжении 850 пикселей прокрутки страницы

Fix: fixed - изображение зафиксировано

Второй шаг:

Distance: 900 пикселей - пролетев еще 50пх изображение изменяется

Opacity: 0 - прозрачность падает - изображение исчезает.

Смотрим результат

Видим, что сначала исчезает первое изображение, потом второе, потом 3-е. Как и нужно.

Последний шаг

Теперь просто накладываем все изображения друг на друга. Выравниваем.

Вот так вот. Статью переписывал несколько раз, поэтому можете поправлять меня, если увидите какие-либо разногласия в цифрах)

Всем успехов!