Анимации при прокрутке: появление блоков, параллакс и видео, которым управляет скролл

В уроке о микроанимациях мы разобрали, зачем интерфейсу движение вообще. Здесь — только то, что связано с прокруткой. Под словами «анимация при скролле» прячутся три разных механизма: они по-разному устроены, по-разному нагружают телефон и требуют разных запасных вариантов.

Самый частый и самый безопасный вид. Блок изначально чуть прозрачен и немного сдвинут вниз, а когда входит в область видимости, плавно встаёт на место. Раньше для этого на каждое событие прокрутки пересчитывали положение элементов — это дорого. Сейчас стандартный инструмент — IntersectionObserver: браузер сам асинхронно сообщает, что элемент пересёк границу экрана, и не нужно слушать каждый пиксель прокрутки (подробно — в MDN).

Если в ряду несколько карточек, их удобно показывать каскадом (stagger): каждая следующая стартует с небольшой задержкой. Каскад подсказывает порядок чтения и делает сетку «живой». Но с длинной задержкой последняя карточка появляется так поздно, что её успевают пропустить.

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

Долгое время это делали только скриптами: на каждое событие прокрутки вычисляли прогресс и меняли стили. Теперь в CSS есть нативные scroll-driven animations: свойство animation-timeline связывает обычную CSS-анимацию со шкалой прокрутки контейнера (scroll()) или с тем, как конкретный элемент проходит через экран (view()). Chrome for Developers отмечает, что такие анимации могут выполняться вне основного потока — значит, не дёргаются, даже когда страница занята другой работой.

Главное правило этого семейства — не перехватывать саму прокрутку. Страница должна ехать ровно так, как человек крутит колесо или ведёт пальцем: анимация следует за скроллом, а не подменяет его своим темпом.

Третье семейство — видео, которым управляет прокрутка. Ролик не играет сам: положение скролла переводится во время ролика (свойство currentTime видеоэлемента), и при прокрутке вниз кадры идут вперёд, а при прокрутке вверх — назад. Так можно разобрать предмет на части и собрать обратно, провести камеру по пространству, показать процесс, который трудно объяснить словами.

Главная техническая ловушка — кодировка. Обычный видеофайл хранит полный (ключевой) кадр лишь изредка, а между ключевыми — только изменения относительно соседних кадров. При прыжке в произвольную точку декодер вынужден вернуться к ближайшему ключевому кадру и пересчитать всё до нужного. При прокрутке назад это особенно заметно: видео дёргается или замирает. Поэтому для scrub-сцены ролик перекодируют так, чтобы ключевым был каждый кадр, — тогда любой кадр открывается сразу и в обе стороны.

В портфолио InterLAB есть демо-сайты, на которых мы отрабатываем эти механизмы. Это не заказы клиентов, а показательные проекты, но в каждом прокрутка отвечает на конкретный вопрос посетителя, а не просто украшает страницу.

• «Крем Coffee», демо кофейни: scrub-видео разбирает напиток на слои — видно, из чего он состоит, — а при прокрутке назад собирает его обратно.
• «Lumen Dental», демо стоматологии: прокрутка управляет 3D-срезом винира, и посетитель видит, как он устроен.
• «Нега SPA», демо спа-салона: прокрутка работает как камера, которая проходит по комнатам, — пространство можно «пройти» до визита.

Общее у всех трёх: один необычный механизм на страницу, а всё остальное — спокойное появление блоков. Цены, формы записи и контакты в этих демо не анимируются, а при включённом «уменьшить движение» главная сцена заменяется статичными кадрами.

Параллакс — слои страницы движутся с разной скоростью: фон медленнее, передний план быстрее, и появляется ощущение глубины. Nielsen Norman Group в тестах параллакса видела в основном равнодушных пользователей и набор проблем: страница грузится дольше, текст поверх движущегося фона читается хуже, а люди, которые быстро листают в поисках нужного, натыкаются на пустые экраны, потому что эффект не успел подгрузиться. Кроме того, крупное движение фона относительно переднего плана — один из типичных источников укачивания у людей с вестибулярными нарушениями.

Если параллакс всё же нужен, делайте его мягким: небольшая разница скоростей, только декоративные слои, текст — на неподвижной основе.

В операционных системах есть настройка «уменьшить движение», и сайт узнаёт о ней через медиазапрос prefers-reduced-motion (описан в MDN и web.dev). Критерий WCAG 2.3.3 «Анимация от взаимодействий» требует, чтобы движение, запущенное действием пользователя, — а прокрутка тоже действие — можно было отключить, если оно не является необходимым. Для scroll-анимаций это значит: при включённой настройке параллакс и привязанные сцены выключаются, блоки появляются простым проявлением или сразу, а вместо scrub-видео показывается статичный кадр или серия картинок с подписями.