Анимации давно стали важной составляющей веб-дизайна, они помогают оживить страницы, направить внимание пользователей и сделать интерфейс более интуитивным и привлекательным. Еще несколько лет назад создание динамичных эффектов, привязанных к прокрутке, требовало использования сложных JavaScript-библиотек и значительных усилий по настройке. Однако с недавним развитием CSS появилась возможность создавать анимации, управляемые непосредственно скроллом, без помощи сторонних скриптов. Это не только упрощает код, но и повышает производительность, облегчая разработку красивых и отзывчивых интерфейсов. Рассмотрим подробнее, что такое анимации, управляемые прокруткой, и как реализовать эти эффекты, используя только CSS.
В основе таких анимаций лежат три ключевых компонента: цель анимации, ключевые кадры и временная шкала. Цель — это элемент страницы, к которому применяется анимация. Ключевые кадры задают этапы изменений стилей, которые необходимо применить. Что же уникально, так это временная шкала, определяющая, как именно происходит анимация: не во времени, как мы привыкли, а исходя из прокрутки пользователя или видимости элемента на экране. До недавнего времени CSS-анимации были полностью временными.
Это означало, что анимация игралась в зависимости от времени — например, через секунду менялся цвет, через две — перемещался объект. Такой подход ограничивал взаимодействие с пользователем и не мог напрямую реагировать на действия вроде прокрутки. В июне 2023 года с появлением спецификации CSS Animations Level 2 была введена возможность задавать собственные временные шкалы, позволяющие анимациям реагировать на события помимо времени. На сегодняшний день выделяют два основных типа анимаций, зависящих от прокрутки: scroll() и view(). Первое — scroll() — работает на основе движения страницы.
Анимация способна идти только тогда, когда пользователь прокручивает экран. Если прокрутка остановилась, движущиеся элементы замедляются или останавливаются, создавая эффект живой связи между взаимодействием и визуализацией. Второй тип — view() — более изящен. Анимация запускается в момент появления элемента в зоне видимости пользователя и прекращается, как только он покидает эту область. Это решение отлично подходит для эффектов появления, слайдинга и других визуальных акцентов, когда элемент «вступает в сцену» в нужный момент.
Рассмотрим пример простого прогресс-бара, который заполняется по мере прокрутки страницы вниз. В традиционном варианте пришлось бы писать много JavaScript, отслеживать положение скролла и вручную менять ширину элемента. С помощью CSS, используя свойства animation-timeline и animation со специальной функцией scroll(), этот эффект реализуется несколькими строками стилей. Нужно определить ключевые кадры анимации, например, от ширины 0% до 100%, а затем указать, что временная шкала для анимации — scroll(). Результат — плавное заполнение полосы по мере прокрутки.
Такой подход минимизирует объем кода и увеличивает отклик, так как браузер сам управляет анимацией. Другой популярный пример — эффект появления изображения или карточки при прокрутке вниз. С использованием view() можно задать, что элемент сдвигается с правой стороны экрана и одновременно становится все более прозрачным, пока полностью не устойчиво в своем положении. Задавая animation-range, можно контролировать момент старта и окончания анимации в пределах области видимости, повышая удобство восприятия и снижая раздражающие эффекты движения. Очень важно помнить об аспектах доступности.
Многочисленные исследования показывают, что интенсивные движения, особенно в больших масштабах или с эффектами глубины, могут вызывать дискомфорт у пользователей с чувствительностью к движению. Поэтому чрезвычайно полезно учитывать пользовательские предпочтения, такие как prefers-reduced-motion. Обертывание анимаций в соответствующие медиа-запросы обеспечит уважительное отношение к таким потребностям без потери функциональности для остальных. Этот подход становится стандартом современного веб-разработчика. Функции scroll() и view() являются параметризуемыми, что открывает расширенные возможности по настройке.
Можно указать элемент, который контролирует прокрутку (например, конкретный скроллбар, а не весь документ), а также ось прокрутки — вертикальную или горизонтальную. Это позволяет создавать уникальные и точные эффекты в сложных интерфейсах, например, для модальных окон, слайдеров и интерактивных секций. Стоит отметить, что поддержка scroll-driven animations сейчас доступна в таких браузерах, как Safari 26 (бета), и постепенно расширяется. Это означает, что уже сегодня можно экспериментировать и применять эти возможности в реальных проектах, гарантируя плавный и современный пользовательский опыт. Для более широкой совместимости рекомендуется предусматривать резервные варианты или прогрессивное улучшение интерфейса, чтобы пользователи в старых браузерах не столкнулись с нарушениями в дизайне.
