Метод init

Библиотека AOS (Animate on Scroll) предоставляет простой и гибкий способ добавления анимаций при скролле страницы. Основным инструментом управления является метод AOS.init(), который отвечает за запуск библиотеки и настройку её поведения.

Основное использование

Метод AOS.init() вызывается после загрузки DOM и выполняет следующие функции:

  1. Сканирует DOM на наличие элементов с атрибутом data-aos.
  2. Применяет классы и стили анимации к этим элементам.
  3. Отслеживает события прокрутки, чтобы активировать анимации в момент появления элементов в области видимости.

Простейший пример:

AOS.init();

В этом случае библиотека будет работать с настройками по умолчанию.

Настройки init

Метод init принимает объект с конфигурацией. Основные параметры:

  • offset – смещение в пикселях относительно нижней границы окна, при котором начинается анимация.

    offset: 120

    По умолчанию 120. Чем больше значение, тем раньше активируется анимация.

  • delay – задержка анимации в миллисекундах.

    delay: 200

    Позволяет создавать эффекты последовательного появления элементов.

  • duration – длительность анимации в миллисекундах.

    duration: 800

    Влияет на плавность и скорость анимации.

  • easing – функция плавности анимации.

    easing: 'ease-in-out'

    Поддерживаются стандартные CSS-функции временной кривой, такие как linear, ease-in, ease-out, ease-in-out.

  • once – boolean, определяет, будет ли анимация воспроизводиться только один раз или каждый раз при прокрутке элемента в область видимости.

    once: true

  • mirror – boolean, позволяет воспроизводить анимацию при скролле вверх.

    mirror: false

  • anchorPlacement – позиция элемента относительно окна для запуска анимации.

    anchorPlacement: 'top-bottom'

    Возможные значения: 'top-bottom', 'top-center', 'center-bottom', 'bottom-bottom' и другие.

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

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

Динамическая инициализация

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

// После добавления нового контента
AOS.init({
  duration: 1200,
});

В этом случае библиотека повторно сканирует DOM и применяет анимации к новым элементам.

Взаимодействие с HTML

Элементы, которые должны анимироваться, получают атрибут data-aos. Например:

<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
  Контент с анимацией
</div>
  • data-aos – тип анимации (fade, fade-up, fade-down, slide-up, zoom-in и т.д.).
  • data-aos-delay – индивидуальная задержка для элемента.
  • data-aos-duration – индивидуальная длительность анимации.

Если значения delay и duration заданы через init, они могут быть переопределены индивидуальными атрибутами на элементе.

Важные нюансы

  • Порядок вызова: AOS.init() должен выполняться после загрузки DOM, иначе элементы не будут найдены.
  • Совместимость с CSS: анимации AOS используют CSS-трансформации и opacity, поэтому любые внешние стили, влияющие на эти свойства, могут изменять поведение анимации.
  • Производительность: большое количество одновременно анимируемых элементов может влиять на FPS. Настройка offset и once помогает оптимизировать работу.

Методы, связанные с init

  • AOS.refresh() – пересчитывает позиции всех элементов и их анимации. Полезно при изменении размеров или динамическом контенте.
  • AOS.refreshHard() – более “жесткая” пересборка, удаляет все предыдущие стили и повторно инициирует библиотеку.

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

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

Оглавление