CSS-анимации и scroll-timeline

Библиотека AOS позволяет создавать плавные анимации элементов при их появлении в зоне видимости при скролле страницы. Она опирается на Intersection Observer API, что обеспечивает высокую производительность и минимальную нагрузку на DOM. Важнейшей особенностью является возможность задавать анимации через HTML-атрибуты, без необходимости глубокого вмешательства в JavaScript-код.

Подключение и инициализация

Для работы AOS достаточно подключить CSS и JS файлы библиотеки. Варианты подключения:

Инициализация выполняется следующим образом:

AOS.init({
  duration: 1200, // Длительность анимации в миллисекундах
  easing: 'ease-in-out', // Функция ускорения
  once: true, // Анимация воспроизводится один раз
  offset: 200 // Смещение для запуска анимации до появления элемента в зоне видимости
});

Ключевые параметры:

  • duration – длительность анимации, влияет на плавность.
  • easing – кривые ускорения, поддерживаются CSS-типовые значения: linear, ease-in, ease-out, ease-in-out.
  • once – если true, анимация срабатывает только при первом появлении элемента.
  • offset – смещение в пикселях для запуска анимации раньше, чем элемент полностью виден.

Использование HTML-атрибутов

AOS использует атрибут data-aos, который задаёт тип анимации для конкретного элемента. Примеры:

Текст с плавным появлением снизу


Элемент с переворотом


Увеличение с задержкой

Дополнительные атрибуты:

  • data-aos-delay – задержка перед началом анимации, в миллисекундах.
  • data-aos-duration – индивидуальная длительность анимации для конкретного элемента.
  • data-aos-offset – смещение запуска анимации относительно видимой области.
  • data-aos-once – локальное переопределение глобального параметра once.
  • data-aos-anchor-placement – положение якоря для запуска анимации (top-bottom, center-center и др.).

Типы анимаций

AOS поддерживает множество базовых анимаций, среди которых:

  • Fade: fade, fade-up, fade-down, fade-left, fade-right.
  • Slide: slide-up, slide-down, slide-left, slide-right.
  • Flip: flip-left, flip-right, flip-up, flip-down.
  • Zoom: zoom-in, zoom-out, zoom-in-up, zoom-in-down.

Каждый тип анимации можно комбинировать с duration, delay и easing для создания уникального визуального эффекта.

Scroll-Timeline и синхронизация анимаций

С появлением спецификации CSS Scroll-Linked Animations (scroll-timeline) стало возможным управлять анимациями с привязкой к позиции скролла без JS. В сочетании с AOS это позволяет добиться:

  • Плавного контроля прогресса анимации через scroll-timeline.
  • Локальной привязки к контейнерам с прокруткой (overflow).
  • Отслеживания прогресса анимации через CSS свойства animation-timeline и animation-delay.

Пример использования scroll-timeline:

@scroll-timeline myTimeline {
  source: auto;
  orientation: block;
  start: 0%;
  end: 100%;
}

.element {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timeline: myTimeline;
}

Таким образом, анимация элемента зависит от позиции скролла, а не только от момента появления в viewport. Это обеспечивает точную синхронизацию анимаций на больших страницах и при сложной верстке.

Интеграция AOS с scroll-timeline

Для интеграции можно использовать AOS как триггер, а scroll-timeline как механизм прогрессивной анимации. Пример:

AOS.init({
  duration: 0, // AOS только для триггера
  once: true
});
.element[data-aos] {
  animation-name: fadeInProgress;
  animation-duration: 1s;
  animation-timeline: scroll(y);
}

В этом случае AOS управляет моментом старта анимации, а scroll-timeline — её прогрессом, что даёт комбинированный контроль над визуальными эффектами.

Продвинутые техники

  1. Сгруппированные анимации: Можно использовать одинаковый data-aos для нескольких элементов и управлять задержками через data-aos-delay для эффекта каскада.
  2. Контейнерные триггеры: Применение data-aos-anchor позволяет привязать анимацию к конкретному родительскому элементу.
  3. Анимации при динамическом контенте: Для элементов, добавленных через JS, нужно вручную вызывать AOS.refresh() для пересчёта позиции.

Оптимизация производительности

  • Не использовать тяжелые анимации на больших списках элементов.
  • Ограничить использование once: false для предотвращения лишних пересчетов.
  • Использовать offset для запуска анимаций заранее, чтобы браузер успевал рендерить элементы до попадания в viewport.
Оглавление