Загрузка и использование локальных файлов

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

Структура подключения локальных файлов:

<link rel="stylesheet" href="aos/aos.css">
<script src="aos/aos.js"></script>

Где aos.css отвечает за стили анимации, а aos.js — за инициализацию и управление анимациями при прокрутке. Файлы обычно располагаются в отдельной папке aos внутри проекта, чтобы было удобно управлять зависимостями.

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

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

document.addEventListener('DOMContentLoaded', () => {
  AOS.init({
    duration: 1200, // длительность анимации в миллисекундах
    easing: 'ease-in-out', // тип кривой ускорения
    once: true, // анимация срабатывает только один раз
    mirror: false, // анимация повторяется при прокрутке вверх
  });
});

Ключевые параметры:

  • duration — контролирует длительность анимации. Значение в миллисекундах.
  • easing — определяет тип ускорения анимации (ease, ease-in, ease-out, linear, и др.).
  • once — если true, анимация происходит один раз при первом появлении элемента в зоне видимости.
  • mirror — если true, элементы анимируются как при прокрутке вниз, так и при возврате вверх.

Разметка HTML для анимаций

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

<div data-aos="fade-up">Анимируемый блок</div>
<div data-aos="flip-left" data-aos-delay="300">Блок с задержкой</div>

Часто используемые значения data-aos:

  • fade — плавное появление.
  • fade-up, fade-down, fade-left, fade-right — появление сдвигом в выбранном направлении.
  • flip-left, flip-right, flip-up, flip-down — переворот по указанной оси.
  • zoom-in, zoom-out — масштабирование.
  • slide-up, slide-down — выезд элемента из-за границы экрана.

Дополнительные атрибуты для тонкой настройки:

  • data-aos-delay="300" — задержка перед началом анимации в миллисекундах.
  • data-aos-duration="1000" — индивидуальная длительность анимации элемента.
  • data-aos-offset="200" — смещение начала анимации относительно верхнего края экрана.
  • data-aos-easing="ease-in-sine" — локальный тип ускорения для элемента.

Локальная организация файлов

При работе с локальными файлами следует учитывать структуру проекта:

project/
├─ index.html
├─ css/
│  └─ style.css
├─ js/
│  └─ main.js
├─ aos/
   ├─ aos.css
   └─ aos.js

Подключение в HTML относительно структуры:

<link rel="stylesheet" href="aos/aos.css">
<script src="aos/aos.js"></script>
<script src="js/main.js" defer></script>

Использование defer гарантирует, что скрипт main.js выполнится после загрузки DOM, инициализация AOS будет корректной.

Работа с динамически добавляемыми элементами

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

AOS.refresh(); // обновление всех элементов

Для динамического добавления блока:

const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-up');
newElement.textContent = 'Новый блок';
document.body.appendChild(newElement);
AOS.refresh(); // пересканировать DOM

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

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

Для проектов с большим количеством анимируемых элементов рекомендуется:

  • Использовать атрибут once: true, чтобы анимация не повторялась при каждой прокрутке.
  • Минимизировать количество одновременно видимых анимируемых элементов.
  • Настроить data-aos-offset, чтобы анимация срабатывала чуть позже появления элемента, снижая нагрузку на рендеринг.

Интеграция с CSS и JavaScript

Можно комбинировать AOS с собственными CSS-классами для создания уникальных эффектов:

.my-custom {
  background-color: #f0f0f0;
  border-radius: 8px;
}
<div class="my-custom" data-aos="zoom-in" data-aos-duration="1500">
  Кастомизированный блок
</div>

Также можно использовать события AOS для запуска сторонних скриптов:

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

Это открывает возможности интеграции анимаций с логикой приложения и взаимодействием пользователя.

Управление и обновление анимаций

AOS предоставляет методы для управления анимациями в реальном времени:

  • AOS.refresh() — пересканирование всех элементов.
  • AOS.refreshHard() — полное обновление со сбросом анимаций.
  • AOS.init({ /* параметры */ }) — повторная инициализация с новыми настройками.

Такой подход полезен для страниц с изменяющимся контентом, AJAX-подгрузкой или динамическими компонентами.

Оглавление