Цепочки действий через события

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

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

После инициализации становится доступен механизм отслеживания событий. Основные события AOS:

  • aos:in — срабатывает, когда элемент входит в область видимости.
  • aos:out — срабатывает, когда элемент выходит из области видимости.
  • aos:destroy — срабатывает при уничтожении анимации элемента.

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

Использование событий для цепочек действий

События AOS работают через стандартные DOM-события и позволяют добавлять слушатели на элементы с анимацией. Пример:

document.addEventListener('aos:in', ({ detail }) => {
  console.log('Элемент появился в зоне видимости:', detail);
  detail.classList.add('highlight'); // Дополнительное действие
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('Элемент покинул зону видимости:', detail);
  detail.classList.remove('highlight'); // Возврат к исходному состоянию
});

detail содержит DOM-элемент, на котором сработала анимация. Использование этого объекта позволяет выстраивать последовательность действий:

  1. Вход элемента в область видимости.
  2. Запуск вспомогательной анимации или изменения стилей.
  3. По завершении анимации — инициирование следующего шага.

Создание сложных цепочек анимаций

Для построения сложных последовательностей можно комбинировать события aos:in с таймерами и Promise. Пример цепочки:

document.addEventListener('aos:in', ({ detail }) => {
  animateStep1(detail)
    .then(() => animateStep2(detail))
    .then(() => animateStep3(detail));
});

function animateStep1(el) {
  return new Promise(resolve => {
    el.classList.add('step1');
    setTimeout(resolve, 500);
  });
}

function animateStep2(el) {
  return new Promise(resolve => {
    el.classList.add('step2');
    setTimeout(resolve, 500);
  });
}

function animateStep3(el) {
  return new Promise(resolve => {
    el.classList.add('step3');
    setTimeout(resolve, 500);
  });
}

В этом примере элемент последовательно проходит три этапа анимации. Каждое действие запускается после завершения предыдущего, создавая плавную цепочку визуальных эффектов.

Синхронизация нескольких элементов

Часто необходимо запускать цепочку действий сразу на нескольких элементах. Для этого удобно использовать группы элементов с одинаковым селектором:

const elements = document.querySelectorAll('.animated-group');

elements.forEach(el => {
  el.addEventListener('aos:in', () => {
    el.classList.add('active');
    setTimeout(() => el.classList.add('completed'), 600);
  });
});

Такой подход позволяет:

  • Синхронизировать визуальные эффекты для группы элементов.
  • Добавлять задержки или последовательности внутри каждой группы.
  • Управлять сложными сценариями с минимальным кодом.

Управление событиями через AOS API

Помимо DOM-событий, можно использовать API AOS для обновления состояния анимаций и повторного запуска цепочек:

AOS.refresh(); // Пересчитать позиции элементов после изменения DOM
AOS.refreshHard(); // Полная пересборка анимаций

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

const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-up');
document.body.appendChild(newElement);
AOS.refresh(); // Элемент теперь участвует в анимациях и событиях

Продвинутая обработка событий

Можно комбинировать события aos:in и aos:out с логикой состояния для построения интерактивных цепочек:

document.addEventListener('aos:in', ({ detail }) => {
  if (!detail.classList.contains('visited')) {
    detail.classList.add('visited');
    startInteractiveSequence(detail);
  }
});

function startInteractiveSequence(el) {
  // Первая анимация
  el.classList.add('first-step');
  setTimeout(() => {
    // Вторая анимация
    el.classList.add('second-step');
    setTimeout(() => {
      // Финальная анимация
      el.classList.add('final-step');
    }, 400);
  }, 400);
}

Такой подход позволяет:

  • Контролировать, что цепочка запускается только один раз.
  • Разделять этапы анимации с промежутками.
  • Использовать состояние элемента для предотвращения повторных срабатываний.

Выводы по построению цепочек действий

  • События AOS (aos:in, aos:out) являются основой для построения сложных последовательностей.
  • Использование detail предоставляет доступ к DOM-элементам и их свойствам.
  • Комбинирование с Promise, setTimeout и классами CSS позволяет создавать плавные, пошаговые анимации.
  • Группировка элементов и управление через AOS API повышает гибкость и масштабируемость цепочек действий.
Оглавление