Структура кастомной анимации

Библиотека AOS (Animate on Scroll) позволяет создавать анимации элементов при прокрутке страницы. В основе любой анимации лежит структура HTML-элемента, набор атрибутов данных, а также CSS-классы и настройки JS, которые определяют поведение анимации.

Атрибуты данных для кастомной анимации

Ключевыми элементами управления анимацией являются data-* атрибуты, которые устанавливаются на HTML-элементы:

  1. data-aos – задаёт тип анимации. Например:

    Контент

    Возможные значения:

    • fade (fade-up, fade-down, fade-left, fade-right)
    • flip (flip-left, flip-right, flip-up, flip-down)
    • slide (slide-up, slide-down, slide-left, slide-right)
    • zoom (zoom-in, zoom-out)

  2. data-aos-offset – определяет смещение триггера анимации от верхней границы окна:

    Контент

    Чем больше значение, тем позже элемент начнёт анимироваться при прокрутке.

  3. data-aos-delay – задержка перед запуском анимации в миллисекундах:

    Контент

    Полезно для поочередного появления нескольких элементов.

  4. data-aos-duration – продолжительность анимации:

    Контент

    По умолчанию AOS использует значение 400ms.

  5. data-aos-easing – функция сглаживания (easing):

    Контент

    Доступные варианты: linear, ease, ease-in, ease-out, ease-in-out.

  6. data-aos-once – определяет, должна ли анимация выполняться один раз или при каждом скролле:

    Контент

Структура HTML для сложных анимаций

Для построения комплексных эффектов элементы можно объединять в контейнеры с вложенными блоками. Например:


  

    
Заголовок 1

    
Описание

  

  

    
Заголовок 2

    
Описание

  

  

    
Заголовок 3

    
Описание

В этой структуре:

  • Контейнер отвечает за визуальное размещение элементов.
  • Каждый блок получает отдельные параметры анимации (delay, offset, duration), что позволяет создавать каскадный эффект появления.

Кастомные CSS-классы и стили

Хотя AOS управляет анимацией через JS и встроенные CSS-классы, можно создавать свои стили для плавного перехода и уникальных эффектов:

.feature {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.feature[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

Здесь:

  • opacity и transform задают стартовое состояние.
  • .aos-animate активируется автоматически AOS при скролле, применяя финальное состояние.

Инициализация и глобальные настройки

Для применения кастомной анимации требуется инициализация AOS с настройками:

AOS.init({
  offset: 120,       // смещение триггера
  delay: 0,          // глобальная задержка
  duration: 800,     // глобальная продолжительность
  easing: 'ease-in-out',
  once: true,        // анимация только один раз
  mirror: false      // повторение при скролле вверх
});
  • offset можно задавать глобально или индивидуально через data-aos-offset.
  • duration и easing также поддерживают локальные значения на элементе.

Создание сложных последовательностей

Для последовательного появления блоков рекомендуется использовать динамическое управление delay:

document.querySelectorAll('.feature').forEach((el, i) => {
  el.setAttribute('data-aos-delay', i * 200);
});

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

Совмещение с другими эффектами

AOS легко комбинируется с:

  • Parallax эффектами через CSS transform и translateZ.
  • Событиями JS, например, запуск функций при достижении видимой области через AOS.refresh() или aos:in событие.
  • CSS переменными, чтобы динамически менять скорость, смещение или прозрачность при скролле.

Контроль через JavaScript

Для более гибкой кастомизации можно использовать методы AOS:

  • AOS.refresh() — обновляет позиции элементов при динамическом изменении DOM.

  • AOS.refreshHard() — полная переработка DOM и переинициализация анимаций.

  • События:

    document.addEventListener('aos:in', ({ detail }) => {
  console.log('Элемент анимирован:', detail);
});

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

Оглавление