Scroll-driven animations: анимации, связанные с прокруткой (scroll-timeline)

🌟 Что такое scroll-driven анимации?

Scroll-driven анимации — это мощный инструмент в CSS, который позволяет привязывать анимации к прокрутке страницы. Вместо того чтобы зависеть от времени (как @keyframes), они реагируют на положение скролла!

До недавнего времени такие эффекты требовали JavaScript, но теперь есть нативные CSS-решения:
- scroll-timeline — определяет область прокрутки, которая управляет анимацией.
- view-timeline — связывает анимацию с появлением элемента в viewport.

🛠️ Как это работает?

1. Создаем timeline

Сначала объявляем временную шкалу (timeline), которая будет отслеживать прокрутку:

@scroll-timeline scroll-in-document {
  source: auto; /* Источник прокрутки (документ или элемент) */
  orientation: vertical; /* Направление: vertical | horizontal */
  scroll-offsets: 0%, 100%; /* Начало и конец анимации */
}

💡 scroll-offsets можно указывать в пикселях или процентах. Например, 200px, 500px запустит анимацию между 200 и 500 пикселями прокрутки.

2. Привязываем анимацию

Теперь связываем эту timeline с CSS-анимацией:

.element {
  animation: fade-in linear;
  animation-timeline: scroll-in-document;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

🎯 Практический пример: Параллакс-эффект

Создадим плавное перемещение фона при скролле:

<div class="parallax-container">
  <div class="parallax-background"></div>
</div>

.parallax-container {
  height: 300vh; /* Увеличиваем высоту контейнера для скролла */
  position: relative;
  overflow: hidden;
}

.parallax-background {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('bg-image.jpg') center/cover;
  animation: parallax linear;
  animation-timeline: scroll(inline);
}

@keyframes parallax {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

🔥 Совет: Используйте scroll(inline) для автоматической привязки к родительскому скролл-контейнеру — это современная альтернатива @scroll-timeline.

📌 view-timeline: Анимация при появлении элемента

Если нужно запустить анимацию, когда элемент появляется в viewport:

.element {
  view-timeline: --reveal block; /* Имя timeline и ось (block = вертикальная) */
  animation: reveal linear;
  animation-timeline: --reveal;
}

@keyframes reveal {
  entry 0% { opacity: 0; transform: translateY(50px); }
  entry 100% { opacity: 1; transform: translateY(0); }
}

⚡ Комбинируем с animation-range

Управляйте тем, на каком отрезке прокрутки будет проигрываться анимация:

.element {
  animation-range: contain 0% contain 50%; /* Начало и конец анимации */
}

Значения animation-range: - cover — относительно всего viewport.
- contain — относительно границ элемента.
- Проценты/пиксели — точные точки срабатывания.

🚀 Идеи для вдохновения

1. Прогресс-бар скролла
   Анимируйте ширину полосы в зависимости от прокрутки страницы.

2. Постепенное появление секций
   Элементы плавно появляются при скролле (как в современных лендингах).

3. 3D-эффекты
   Поворачивайте карточки или изменяйте perspective при прокрутке.

🔥 Важно знать

• Поддержка браузеров: На момент 2024 года scroll-timeline и view-timeline работают в Chrome и Edge (с флагом или в Stable).
• Фолбэк: Всегда добавляйте альтернативу через @supports или JavaScript (например, библиотека ScrollTrigger от GSAP).

@supports not (animation-timeline: scroll(inline)) {
  .element { animation: fallback-animation; }
}

🧩 Заключение

Scroll-driven анимации открывают новые возможности для создания динамичных интерфейсов без JavaScript. Экспериментируйте, сочетайте с другими свойствами CSS (clip-path, mix-blend-mode), и пусть ваши страницы оживут!

Если хотите глубже погрузиться в тему, посмотрите разборы Данилы Бежина на YouTube — там есть отличные примеры.

Теперь — в бой! Прокручивайте, анимируйте, удивляйте. 🎉