Параметры инициализации

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

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

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

AOS.init({
  // параметры будут рассмотрены ниже
});

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

offset

Определяет смещение в пикселях, после которого элемент считается видимым для запуска анимации. По умолчанию 120.

Пример:

AOS.init({
  offset: 200
});

В этом случае анимация начнется, когда верх элемента отступит на 200 пикселей от верхнего края окна просмотра.

delay

Устанавливает задержку перед запуском анимации для каждого элемента в миллисекундах. Значение по умолчанию — 0.

AOS.init({
  delay: 300
});

Анимация будет запускаться с задержкой 300 мс после попадания элемента в область видимости.

duration

Определяет длительность анимации в миллисекундах. По умолчанию — 400.

AOS.init({
  duration: 800
});

Элемент будет анимироваться на протяжении 800 мс.

easing

Настраивает функцию сглаживания анимации, что позволяет управлять её динамикой. По умолчанию используется "ease".

Примеры значений:

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

once

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

AOS.init({
  once: true
});

В этом случае анимация проиграется один раз и не будет повторяться при повторной прокрутке.

mirror

Параметр, который определяет, должны ли анимированные элементы возвращаться в анимацию при прокрутке обратно вверх. По умолчанию — false.

AOS.init({
  mirror: true
});

При включении, элементы анимируются и при движении страницы вверх, создавая эффект зеркального повторения.

anchorPlacement

Указывает, какой точке элемента соответствует точка триггера. Возможные значения:

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

Настройка анимаций индивидуально через атрибуты

Кроме глобальной инициализации, каждый элемент может иметь свои локальные параметры через data-* атрибуты:

<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"></div>
  • data-aos — тип анимации (fade-up, fade-down, zoom-in, flip-left и другие).
  • data-aos-duration — переопределяет глобальную длительность.
  • data-aos-delay — задаёт индивидуальную задержку запуска анимации.
  • data-aos-offset — смещение для конкретного элемента.
  • data-aos-easing — функция сглаживания конкретного элемента.
  • data-aos-once — можно задать отдельное поведение проигрывания (true или false).

Такое сочетание глобальных и локальных параметров позволяет гибко управлять поведением каждой анимации на странице.

Пример комплексной инициализации

AOS.init({
  offset: 150,
  delay: 100,
  duration: 1200,
  easing: 'ease-in-out',
  once: true,
  mirror: false,
  anchorPlacement: 'top-center'
});

В этом примере анимации будут запускаться с отступом 150px от верхнего края окна, с задержкой 100ms, длительностью 1200ms, плавным ускорением и замедлением, проигрываться один раз и с триггером на верхней точке элемента, совпадающей с центром окна просмотра.

Дополнительные опции

  • disable — позволяет отключить AOS на определённых устройствах. Можно передать true, "phone", "tablet", "mobile" или функцию.
  • startEvent — событие, при котором AOS начинает инициализацию (по умолчанию "DOMContentLoaded").
  • initClassName — класс, добавляемый элементу при инициализации (aos-init по умолчанию).
  • animatedClassName — класс, добавляемый при срабатывании анимации (aos-animate по умолчанию).
  • useClassNames — если true, позволяет использовать имена классов в CSS вместо встроенных стилей AOS.
  • disableMutationObserver — отключает автоматическое отслеживание изменений DOM (по умолчанию false).
  • debounceDelay — задержка в миллисекундах при ресайзе окна для перерасчёта позиций элементов.
  • throttleDelay — задержка в миллисекундах для обработки скролла и оптимизации производительности.

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

Оглавление