Анімація при скролі на CSS. Scroll-driven Animations

scroll-animation

Анімація при скролі - це один з найпопулярніших трендів веб-дизайну. Вона додає динаміку та інтерактивність до веб-сайтів, забезпечуючи кращий користувацький досвід. Анімація при скролі може бути використана для підсилення важливих елементів, підвищення уваги користувачів та створення цікавих ефектів.

Зазвичай анімацію при скролі сторінки завжди потрібно було писати з використанням JavaScript. Для цього використовувалися події scroll та resize, які відслідковували скролінг сторінки та розмір вікна браузера. Наприклад, для створення ефекту паралаксу можна було використати наступний код, який встановлює CSS властивість --scroll в залежності від положення скролу:

window.addEventListener(
  "scroll",
  () => {
    document.body.style.setProperty(
      "--scroll",
      window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
    );
  },
  false
);

Далі це значення можна було використати для створення анімації за допомогою CSS. За допомогою animation-delay та animation-duration можна було створити анімацію, яка запускається при певному значенні --scroll.

svg {
  position: fixed;

  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

Але з появою CSS Scroll-driven Animations це стало можливим без використання JavaScript.

CSS Scroll-driven Animations

CSS Scroll-driven Animations - це нова CSS функціональність, яка дозволяє створювати анімацію при скролі без використання JavaScript. Вона базується на CSS Scroll Snap Points, які дозволяють визначати точки прокрутки, до яких сторінка прокручується автоматично.

CSS Scroll-driven Animations дозволяють встановлювати анімацію, яка запускається при досягненні певної точки прокрутки. Для цього використовується CSS властивість scroll-timeline, яка вказує на те, яка анімація має бути відтворена при досягненні певної точки прокрутки.

@keyframes animate-it {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: animate-it 1s linear infinite;
  scroll-timeline: scroll();
}

Функція scroll приймає два параметри - scroller та axis.

Допустимі значення для scroller:

nearest: використовує контейнер прокрутки ближайшого предка (за замовчуванням).
root: використовує область просмотра документа як контейнер прокрутки.
self: використовує сам елемент як контейнер прокрутки.

Допустимі значення для axis:

block: використовує вимір прогресу вздовж осі блоку контейнера прокрутки (за замовчуванням).
inline: використовує вимір прогресу вздовж вбудованої осі контейнера прокрутки.
y: використовує вимір прогресу вздовж осі y контейнера прокрутки.
x: використовує вимір прогресу вздовж осі x контейнера прокрутки.

Наприклад, щоб прив’язати анімацію до кореневого скролера на осі блоку, значення, які потрібно передати в scroll() - це root та block. В сукупності значення дорівнює scroll(root block).

Альтернативний спосіб визначити шкалу прогресу прокрутки.

Він трохи більш детальний, але може бути корисним, якщо ви не націлюєтеся на батьківський або кореневий скролер, або коли на сторінці використовується кілька часових шкал, або коли автоматичний пошук не працює. Таким чином, ви можете ідентифікувати часову шкалу прогресу прокрутки за іменем, яке ви їй даєте.

Щоб створити іменовану часову шкалу прогресу прокрутки для елемента, встановіть для властивості CSS scroll-timeline-name в контейнері прокрутки ідентифікатор за вашим смаком. Значення повинно починатися з --.

Щоб налаштувати вісь для відстеження, також оголосіть властивість scroll-timeline-axis. Допустимі значення такі ж, як і для аргумента <axis> функції scroll().

Нарешті, щоб пов’язати анімацію з часовою шкалою виконання прокрутки, встановіть для властивості animation-timeline елемента, який необхідно анімувати, те ж значення, що і ідентифікатор, використаний для scroll-timeline-name.

Наприклад:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it 1s linear infinite;
  animation-timeline: --my-scroller;
}

Більше інформації про CSS Scroll-driven Animations можна знайти в документації та на сторінці з прикладами.

Приклади анімації при скролі

Розглянемо декылька прикладів анімації при скролі, які можна створити за допомогою CSS Scroll-driven Animations та їх аналогічні варіанти на JavaScript.

Анімація повороту елементу відносто скролу

Реалізація анімації повороту елементу відносто скролу за допомогою JavaScript. В даному прикладі використовується захоплення події scroll та встановлення CSS властивості --scroll в залежності від положення скролу.

Реалізація анімації повороту елементу відносто скролу за допомогою CSS Scroll-driven Animations. В даному прикладі використовується CSS властивість scroll-timeline для встановлення анімації, яка запускається при певному значенні --scroll.

Реалізація анімації повороту елементу відносто скролу за допомогою CSS Scroll-driven Animations:

Нижче не буду писати пояснення, а просто покажу приклади анімації при скролі, які можна створити за допомогою CSS Scroll-driven Animations та їх аналогічні варіанти на JavaScript.

Анімація повороту куба, зміни кольору та заповнення прогресу прокрутки сторінки

JavaScript:

CSS Scroll-driven Animations:

Зменшення повноекранної картинки в фіксований хедер при скролі