Подключение через CDN

Библиотека AOS (Animate on Scroll) предоставляет удобный способ добавления анимаций к элементам при их появлении в области видимости пользователя. Один из самых быстрых способов интеграции — использование CDN (Content Delivery Network). Этот метод не требует установки через npm или скачивания файлов, что упрощает тестирование и быстрый старт проекта.

Подключение CSS

Для корректного отображения анимаций необходимо подключить CSS-файл библиотеки. Он содержит все стили, необходимые для анимации элементов. Подключение осуществляется через тег <link> в <head> HTML-документа:

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

Ключевые моменты:

  • Ссылка указывает на актуальную версию AOS (в примере — 2.3.4). При необходимости можно заменить на более новую версию.
  • CSS-файл должен подключаться до пользовательских стилей, если требуется переопределение классов AOS.

Подключение JavaScript

Для работы анимаций требуется скрипт AOS. Его подключают перед закрывающим тегом </body> для оптимизации загрузки страницы:

<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

Особенности подключения:

  • Подключение перед закрывающим тегом </body> обеспечивает, что все элементы DOM будут загружены перед инициализацией анимаций.
  • Скрипт можно подключать с атрибутом defer, чтобы браузер не блокировал рендеринг страницы:
<script defer src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

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

После подключения CSS и JS необходимо инициализировать AOS. Это делается с помощью функции AOS.init(). Можно вызвать её в отдельном скрипте либо внутри тега <script> после подключения библиотеки:

<script>
  AOS.init({
    duration: 1200, // длительность анимации в миллисекундах
    once: true,     // анимация срабатывает только один раз при скролле
  });
</script>

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

  • duration — определяет скорость анимации. Значение по умолчанию — 400 мс.
  • once — если true, элемент анимируется один раз; при false анимация повторяется при каждом появлении элемента в области видимости.
  • offset — расстояние в пикселях от нижней границы окна до элемента, при котором начинается анимация.

Пример с дополнительными настройками:

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

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

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

<div data-aos="fade-up">Контент с анимацией появления снизу</div>
<div data-aos="zoom-in" data-aos-delay="300">Элемент с задержкой анимации</div>

Часто используемые атрибуты:

  • data-aos — тип анимации (fade, fade-up, fade-down, zoom-in, flip-left и др.).
  • data-aos-delay — задержка анимации в миллисекундах.
  • data-aos-duration — индивидуальная длительность анимации для конкретного элемента.
  • data-aos-offset — смещение для срабатывания анимации относительно области видимости.

Преимущества подключения через CDN

  1. Быстрая интеграция — не требуется установка через пакетные менеджеры.
  2. Автоматическое обновление через CDN — можно легко переключать версии.
  3. Минимальная нагрузка на проект — достаточно вставить два тега (<link> и <script>).
  4. Совместимость с любыми фреймворками — работает с чистым HTML, а также с React, Vue, Angular и другими.

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

  • Подключение через CDN лучше всего подходит для небольших проектов или прототипов.
  • Для крупных проектов рекомендуется использовать локальную установку через npm, чтобы иметь контроль над версией и возможностью кастомизации стилей.
  • Следует подключать библиотеку после основных CSS и перед закрывающим тегом </body> для корректной работы анимаций.
  • Необходимо тестировать разные параметры и задержки, чтобы анимации выглядели плавно на различных устройствах.
Оглавление