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

Инициализация начинается с корректного подключения библиотеки. AOS может быть добавлена несколькими способами:

Через CDN:

<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

Через пакетный менеджер (npm/yarn):

npm install aos --save

Импорт в Jav * aScript:

import AOS from 'aos';
import 'aos/dist/aos.css';

Ключевым моментом является подключение как JavaScript-файла, так и CSS-стилей. Без стилей анимации не будут отображаться корректно.

Базовая инициализация

После подключения необходимо выполнить инициализацию:

AOS.init();

Этот вызов активирует обработчики прокрутки и применяет анимации к элементам, содержащим атрибут data-aos.

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

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

Или при использовании современных сборщиков:

AOS.init();

(если код выполняется после полной загрузки DOM)

Конфигурация параметров

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

AOS.init({
  offset: 120,
  delay: 0,
  duration: 400,
  easing: 'ease',
  once: false,
  mirror: false,
  anchorPlacement: 'top-bottom'
});

Основные параметры:

  • offset — смещение (в пикселях) от точки срабатывания анимации
  • delay — задержка перед началом (в миллисекундах)
  • duration — длительность анимации
  • easing — функция плавности
  • once — запуск анимации только один раз
  • mirror — повтор анимации при прокрутке вверх
  • anchorPlacement — точка привязки элемента к viewport

Поведение при прокрутке

AOS отслеживает позицию элементов относительно области просмотра (viewport) и добавляет CSS-классы при достижении заданной точки.

Основной механизм:

  • при входе элемента в viewport → добавляется класс aos-animate
  • при выходе (если once: false) → класс удаляется

Это позволяет управлять анимацией исключительно через CSS.

Атрибуты HTML

Инициализация на клиенте работает только при наличии атрибутов в разметке:

<div data-aos="fade-up"></div>

Дополнительные настройки можно задавать прямо в HTML:

<div 
  data-aos="fade-up"
  data-aos-delay="200"
  data-aos-duration="1000"
  data-aos-once="true">
</div>

Приоритет:

  1. Атрибуты HTML
  2. Глобальные настройки AOS.init()

Повторная инициализация

При динамическом изменении DOM (например, при загрузке контента через AJAX) требуется обновление:

AOS.refresh();

Если изменения значительные (например, добавлено много элементов):

AOS.refreshHard();

Разница:

  • refresh — пересчитывает позиции
  • refreshHard — полностью пересоздает внутреннюю структуру

Инициализация в SPA и фреймворках

В одностраничных приложениях (React, Vue, Angular) важно учитывать жизненный цикл компонентов.

React (пример):

import { useEffect } from 'react';
import AOS from 'aos';

useEffect(() => {
  AOS.init();
}, []);

При обновлении контента:

useEffect(() => {
  AOS.refresh();
});

Vue:

mounted() {
  AOS.init();
}

События AOS

Библиотека предоставляет события, которые можно использовать при инициализации:

document.addEventListener('aos:in', ({ detail }) => {
  console.log('Элемент появился:', detail);
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('Элемент исчез:', detail);
});

Это позволяет добавлять кастомную логику при появлении элементов.

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

При инициализации важно учитывать нагрузку:

  • уменьшение количества анимируемых элементов
  • отключение mirror, если не требуется
  • использование once: true для статичных страниц

Пример оптимизированной конфигурации:

AOS.init({
  once: true,
  duration: 600,
  easing: 'ease-out-cubic'
});

Инициализация с учётом устройств

Для мобильных устройств иногда требуется отключение анимаций:

AOS.init({
  disable: 'mobile'
});

Возможные значения:

  • true — отключить полностью
  • 'mobile' — отключить на мобильных
  • 'phone' / 'tablet' — выборочно

Также можно передать функцию:

AOS.init({
  disable: function () {
    return window.innerWidth < 768;
  }
});

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

По умолчанию AOS отслеживает прокрутку window. Для кастомных контейнеров требуется дополнительная настройка:

AOS.init({
  startEvent: 'DOMContentLoaded'
});

И использование CSS overflow-контейнеров требует ручного контроля обновлений через refresh().

Порядок выполнения

Корректная последовательность:

  1. Подключение CSS
  2. Подключение JS
  3. Загрузка DOM
  4. Вызов AOS.init()
  5. (при необходимости) AOS.refresh()

Нарушение порядка часто приводит к отсутствию анимаций.

Распространённые ошибки

1. Инициализация до загрузки DOM

AOS.init(); // слишком рано

2. Отсутствие CSS Анимации не видны, хотя JS работает.

3. Конфликт с другими библиотеками Некоторые CSS-анимации могут переопределять стили AOS.

4. Отсутствие refresh при динамическом контенте

Расширенная настройка

Пример полной конфигурации:

AOS.init({
  offset: 100,
  delay: 50,
  duration: 800,
  easing: 'ease-in-out',
  once: true,
  mirror: false,
  anchorPlacement: 'center-bottom',
  disable: false,
  startEvent: 'DOMContentLoaded',
  animatedClassName: 'aos-animate',
  initClassName: 'aos-init',
  useClassNames: false
});

Каждый параметр влияет на момент и стиль появления элементов, что позволяет точно контролировать поведение анимаций на странице.

Оглавление