42. Scroll-driven animations

CSS: Scroll-driven animations

Иллюстрация к уроку Scroll-driven animations позволяют создавать интерактивные анимации, которые реагируют на прокрутку страницы. Это отличный способ сделать ваш сайт более привлекательным и вовлекающим, добавляя динамичные элементы, которые изменяются по мере прокрутки пользователем контента.

Что такое Scroll-driven animations?

Вместо того чтобы запускать анимацию по таймеру или при наступлении определенного события (например, наведении мыши), scroll-driven animations привязывают прогресс анимации к положению полосы прокрутки. Другими словами, анимация “проигрывается” по мере того, как пользователь прокручивает страницу.

Основы Scroll-driven animations

Для создания scroll-driven animations нам потребуются новые CSS свойства, которые позволяют связать анимации с scroll контейнером. Основные свойства:

scroll-timeline: Определяет, какой контейнер прокрутки будет контролировать анимацию.
animation-timeline: Связывает анимацию с определенной scroll-timeline.
view-timeline: Запускает анимацию, когда элемент входит в область видимости.
view-timeline-name: Имя области видимости для связывания с анимацией.

Рассмотрим простой пример:

<!DOCTYPE html>
<html>
<head>
  <title>Scroll-Driven Animation</title>
  <style>
    body {
      height: 200vh; /* Увеличиваем высоту body для создания скролла */
    }

    .animated-box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: move 5s linear forwards;
      animation-timeline: view(); /* Связываем анимацию с прокруткой viewport */
      animation-range: entry 25% cover 75%; /* Анимация стартует когда элемент входит в область видимости на 25% и заканчивается, когда он покрыт на 75% */
    }

    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(500px);
      }
    }
  </style>
</head>
<body>
  <div class="animated-box"></div>
</body>
</html>

В этом примере:

body имеет высоту 200vh, чтобы создать возможность прокрутки.
.animated-box - это элемент, который будет анимироваться.
animation-timeline: view(); связывает анимацию move с областью видимости viewport.
animation-range: entry 25% cover 75%; задает диапазон прокрутки, в котором будет проигрываться анимация. entry 25% означает, что анимация начинается, когда элемент входит в область видимости на 25%. cover 75% означает, что анимация заканчивается, когда элемент покрыт на 75%.

Жизненный пример

Scroll-driven animations широко используются для создания параллакс-эффектов на сайтах, а также для анимирования элементов при их появлении в поле зрения пользователя. Многие современные веб-сайты и приложения используют эту технику для улучшения пользовательского опыта. Примеры:

Сайты-портфолио: Анимация фотографий, текста и других элементов при прокрутке страницы.
Одностраничные сайты: Плавный переход между секциями при прокрутке.
Статьи и блоги: Анимация изображений и графиков по мере прочтения статьи.

Фреймворки, такие как GSAP (GreenSock Animation Platform), также предоставляют инструменты для создания scroll-driven animations, упрощая процесс и добавляя больше возможностей.

Ключевые моменты

Scroll-driven animations связывают анимации с прокруткой страницы.
Используйте scroll-timeline и animation-timeline для контроля анимации.
view-timeline и view-timeline-name запускают анимации при входе элемента в область видимости.
animation-range определяет диапазон прокрутки, в котором будет проигрываться анимация.
Scroll-driven animations улучшают пользовательский опыт и делают сайты более интерактивными.