Инициализация библиотеки

Для начала работы с библиотекой AOS (Animate on Scroll) необходимо подключить её CSS и JavaScript файлы. Существует два основных способа подключения: через CDN и через локальные файлы.

Через CDN:

Через локальные файлы:

  1. Скачиваются файлы с официального репозитория AOS.
  2. Подключение аналогично CDN, но указывается путь к локальным ресурсам:

После подключения библиотека готова к использованию.

Инициализация AOS

Инициализация выполняется с помощью метода AOS.init(). Этот метод необходимо вызвать после загрузки DOM, чтобы все элементы, к которым будут применяться анимации, уже существовали на странице.

Пример базовой инициализации:

document.addEventListener('DOMContentLoaded', function() {
  AOS.init();
});

Или, если использовать jQuery:

$(document).ready(function() {
  AOS.init();
});

Основные параметры инициализации

Метод AOS.init() принимает объект с конфигурацией, позволяющий тонко настраивать поведение анимаций.

offset

Определяет расстояние в пикселях от верхнего края окна до момента запуска анимации.

AOS.init({
  offset: 120
});

delay

Задаёт задержку перед запуском анимации для каждого элемента, в миллисекундах.

AOS.init({
  delay: 200
});

duration

Продолжительность анимации в миллисекундах.

AOS.init({
  duration: 1000
});

easing

Определяет кривую анимации (аналог CSS transition-timing-function). Примеры значений: 'ease', 'ease-in-out', 'linear'.

AOS.init({
  easing: 'ease-in-out'
});

once

Если установлено в true, анимация срабатывает только один раз при первом скролле, иначе – каждый раз при прокрутке элемента в видимую область.

AOS.init({
  once: true
});

mirror

Позволяет анимации повторно запускаться при прокрутке обратно вверх. Значение true включает повторное воспроизведение.

AOS.init({
  mirror: true
});

anchorPlacement

Определяет точку привязки анимации относительно элемента и окна. Возможные значения:

  • 'top-bottom' – верх элемента появляется внизу окна (по умолчанию)
  • 'top-center' – верх элемента по центру окна
  • 'center-bottom' – центр элемента внизу окна
AOS.init({
  anchorPlacement: 'top-center'
});

Применение инициализации на динамических страницах

На сайтах с динамически загружаемым контентом (например, через AJAX) необходимо вручную обновлять AOS после добавления новых элементов:

AOS.refresh();

Если элементы появляются часто, можно использовать:

AOS.refreshHard();

Разница в том, что refreshHard полностью пересчитывает все элементы, включая удалённые и добавленные, что может быть затратнее по производительности.

Глобальные и локальные настройки

Параметры можно задавать не только при глобальной инициализации через AOS.init(), но и на каждом элементе с помощью атрибутов HTML.

Примеры атрибутов:


  Анимируемый блок

Ключевые атрибуты:

  • data-aos – тип анимации (fade, fade-up, fade-down, zoom-in, flip-left и др.)
  • data-aos-offset – смещение триггера
  • data-aos-delay – задержка запуска
  • data-aos-duration – длительность анимации
  • data-aos-easing – кривая анимации
  • data-aos-once – однократное воспроизведение (true/false)

Если указаны локальные параметры через data-*, они переопределяют глобальные значения из AOS.init().

Автоматическая инициализация с пользовательскими параметрами

Можно объединить глобальные и локальные настройки, чтобы базовая анимация имела единые параметры, а для отдельных элементов задавать особые значения:

AOS.init({
  offset: 100,
  duration: 800,
  easing: 'ease-in-out',
  once: false,
  mirror: false
});

  Элемент с индивидуальной длительностью анимации

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

  • Минимизировать количество одновременно анимируемых элементов на странице.
  • Использовать once: true для анимаций, которые не должны повторяться, чтобы снизить нагрузку на браузер.
  • На страницах с динамическим контентом обновлять AOS только после добавления новых блоков, а не после каждого скролла.
  • Для крупных сайтов рекомендуется объединять AOS с IntersectionObserver для контроля видимости элементов без лишних вычислений.
Оглавление