Установка через npm

Библиотека AOS (Animate on Scroll) предоставляет удобный способ анимации элементов при скролле страницы. Для интеграции через npm необходимо выполнить несколько последовательных шагов, которые обеспечат корректную работу библиотеки в проекте на JavaScript.

1. Инициализация проекта

Перед установкой AOS через npm убедитесь, что проект уже инициализирован как Node.js проект. Для этого выполняется команда:

npm init -y

Эта команда создаёт файл package.json с базовыми настройками проекта. Файл package.json будет использоваться для хранения зависимостей, включая AOS.

2. Установка библиотеки

Для установки AOS используется команда:

npm install aos --save
  • aos — имя пакета в npm-репозитории.
  • --save — флаг, который добавляет зависимость в секцию dependencies файла package.json (в современных версиях npm флаг опционален, так как сохранение происходит по умолчанию).

После выполнения этой команды в директории проекта появится папка node_modules, содержащая библиотеку AOS и её зависимости.

3. Подключение стилей и скриптов

После установки необходимо подключить CSS и JS AOS в проект. В случае модульной структуры можно импортировать их напрямую в главный JavaScript-файл:

// Импорт CSS
import 'aos/dist/aos.css';

// Импорт JS
import AOS from 'aos';

// Инициализация библиотеки
AOS.init();

Если проект использует сборщик вроде Webpack, Parcel или Vite, такой подход позволяет включить все необходимые файлы напрямую в бандл.

4. Конфигурация при инициализации

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

AOS.init({
  offset: 120, // Смещение от начала окна для срабатывания анимации
  delay: 0,    // Задержка анимации в миллисекундах
  duration: 400, // Продолжительность анимации
  easing: 'ease', // Функция сглаживания
  once: false,   // Анимация срабатывает один раз или при каждом скролле
  mirror: false, // Анимация повторяется при прокрутке назад
});
  • offset — задаёт расстояние в пикселях, при котором элемент начинает анимацию относительно видимой части окна.
  • delay и duration позволяют тонко настроить время и плавность анимации.
  • once полезен, если требуется, чтобы анимация происходила только один раз при первом появлении элемента.
  • mirror активирует повторение анимации при скролле вверх.

5. Импорт отдельных модулей (опционально)

В случаях, когда проект критичен к размеру бандла, можно импортировать только нужные части библиотеки. Например, если использовать ES Modules:

import { init, refresh } from 'aos';
init();

Метод refresh() применяется для повторного вычисления позиций элементов после динамического изменения DOM.

6. Добавление атрибутов к элементам

После установки и инициализации библиотеки, для анимации элементов используются data-атрибуты:

<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
  Пример анимированного блока
</div>
  • data-aos — тип анимации (fade-up, fade-down, slide-left, zoom-in и другие).
  • data-aos-delay и data-aos-duration переопределяют значения, заданные в глобальной конфигурации.

7. Обновление и оптимизация

При динамическом добавлении элементов на страницу необходимо вызывать:

AOS.refresh();

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

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

Оглавление