Регистрация новой анимации

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

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

После подключения библиотека инициализируется с помощью метода AOS.init():

AOS.init({
  duration: 1000,  // Длительность анимации в миллисекундах
  easing: 'ease-in-out', // Функция сглаживания
  once: true, // Анимация будет проигрываться только один раз
});

Ключевые параметры инициализации:

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

Добавление анимаций к элементам

Каждый HTML-элемент, который должен анимироваться при прокрутке, помечается атрибутом data-aos:

<div data-aos="fade-up">Содержимое блока</div>
<div data-aos="zoom-in" data-aos-delay="200">Другой блок</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, slide-left, slide-right — сдвиг элемента с эффектом движения.

Настройка параметров отдельной анимации

Для каждого элемента можно индивидуально задавать параметры:

<div 
  data-aos="fade-up" 
  data-aos-duration="1500" 
  data-aos-delay="300" 
  data-aos-offset="100"
  data-aos-easing="ease-in-sine"
>
  Контент с индивидуальными параметрами анимации
</div>
  • data-aos-duration — переопределяет глобальную длительность.
  • data-aos-delay — задержка перед анимацией.
  • data-aos-offset — смещение срабатывания относительно верха экрана.
  • data-aos-easing — функция сглаживания для конкретного элемента.

Программное управление анимациями

AOS предоставляет методы для динамического контроля:

  • AOS.refresh() — пересчитывает позиции элементов и пересоздаёт анимации. Полезно при динамическом изменении DOM.
  • AOS.refreshHard() — более полная перезагрузка библиотеки, которая удаляет старые анимации и создаёт новые.
  • AOS.init() — повторная инициализация после изменения параметров или динамического добавления элементов.

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

const newElement = document.createElement('div');
newElement.textContent = "Новый блок";
newElement.setAttribute('data-aos', 'fade-right');
document.body.appendChild(newElement);
AOS.refresh(); // Пересчёт анимаций

Работа с событиями AOS

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

  • aos:in — элемент появился на экране.
  • aos:out — элемент ушёл с экрана.

Пример прослушивания событий:

document.addEventListener('aos:in', ({ detail }) => {
  console.log('Анимация началась для:', detail);
});

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

Для больших страниц рекомендуется:

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

Создание пользовательских анимаций

Можно расширять стандартные эффекты AOS с помощью CSS:

@keyframes custom-fade {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

[data-aos="custom-fade"] {
  animation-name: custom-fade;
  animation-duration: 1200ms;
  animation-fill-mode: both;
}

И применить к элементу:

<div data-aos="custom-fade">Пользовательская анимация</div>

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

Оглавление