Событие aos:in

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

Назначение события

Событие aos:in используется для:

  • Отслеживания активации анимации – можно выполнять дополнительные действия одновременно с запуском анимации, например, запускать звук, изменять классы или инициировать другие JS-эффекты.
  • Интеграции с другими библиотеками – можно синхронизировать анимацию AOS с внешними библиотеками визуализации или слайдерами.
  • Оптимизации UX – позволяет запускать тяжелые вычисления или сетевые запросы только тогда, когда пользователь реально видит элемент.

Синтаксис использования

Событие подключается с помощью метода addEventListener к элементу document. Пример базового синтаксиса:

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

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

Особенности поведения

  1. Множественные срабатывания – событие aos:in может срабатывать несколько раз для одного и того же элемента, если он выходит и снова входит в область видимости, если не установлен параметр once: true.
  2. Совместимость с aos:out – библиотека AOS также генерирует событие aos:out, которое фиксирует момент, когда элемент покидает видимую область. Совместное использование этих событий позволяет создавать сложные интерактивные сценарии.
  3. Связь с анимационными классами – событие aos:in всегда вызывается после добавления класса анимации к элементу, что дает возможность использовать CSS-переходы или JS-анимации синхронно.

Примеры практического применения

1. Запуск дополнительной функции при появлении блока

document.addEventListener('aos:in', ({ detail }) => {
  if(detail.classList.contains('feature-block')) {
    startCounter(detail);
  }
});

function startCounter(element) {
  let count = 0;
  const target = element.querySelector('.counter');
  const interval = setInterval(() => {
    count += 1;
    target.textContent = count;
    if(count >= 100) clearInterval(interval);
  }, 20);
}

2. Добавление класса при активации анимации

document.addEventListener('aos:in', ({ detail }) => {
  detail.classList.add('active-animation');
});

3. Отправка события в аналитику при скролле к элементу

document.addEventListener('aos:in', ({ detail }) => {
  if(detail.dataset.track === 'section') {
    analytics.track('SectionViewed', { sectionId: detail.id });
  }
});

Параметры и настройки, влияющие на aos:in

  • once – логическое значение (true/false). Если true, событие срабатывает только один раз для элемента.
  • offset – смещение в пикселях, определяющее, когда элемент считается появившимся в области видимости. Событие aos:in срабатывает после достижения этого порога.
  • duration – длительность анимации в миллисекундах; влияет на визуальное совпадение с событием, хотя событие срабатывает в момент входа элемента, а не окончания анимации.

Советы по использованию

  • Всегда проверять detail для точного определения элемента, особенно если на странице много анимируемых блоков.
  • При тяжелых вычислениях лучше использовать requestAnimationFrame или отложенные функции, чтобы не блокировать основной поток при срабатывании события.
  • Для динамически подгружаемых элементов нужно инициировать AOS.refresh(), чтобы новые элементы также могли генерировать событие aos:in.

Итоговое понимание

Событие aos:in является мощным инструментом управления моментом появления анимированных элементов. Оно предоставляет точный хук для выполнения любых JS-действий синхронно с анимацией, что делает AOS не только инструментом для визуальных эффектов, но и удобной платформой для интерактивного скролл-контента.

Оглавление