Событие aos:out

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

Принцип работы aos:out

Событие aos:out срабатывает один раз каждый раз, когда элемент перестаёт быть видимым пользователю в области просмотра. Оно противоположно событию aos:in, которое фиксирует появление элемента.

Ключевые моменты:

  • Срабатывает при прокрутке страницы вверх или вниз, когда элемент полностью или частично выходит за границы видимой области.
  • Позволяет реализовать эффекты сброса анимации или повторного запуска при повторном появлении элемента.
  • Может использоваться совместно с другими событиями AOS для создания комплексных интерактивных интерфейсов.

Регистрация обработчика события

Для отслеживания события aos:out используется стандартный синтаксис JavaScript для работы с событиями DOM:

document.addEventListener('aos:out', function(event) {
    // event.detail содержит ссылку на элемент, который покинул экран
    const element = event.detail;
    console.log('Элемент покинул видимую область:', element);
});

Пояснение:

  • event.detail — объект, который содержит ссылку на элемент, покинувший область просмотра.
  • Можно применять любые манипуляции с DOM, например, скрывать элемент, изменять классы или запускать сторонние функции.

Использование с динамическими анимациями

Событие aos:out часто применяется для:

  1. Повторного воспроизведения анимаций:
document.addEventListener('aos:out', function(event) {
    const element = event.detail;
    // Сброс текущей анимации
    element.classList.remove('aos-animate');
    // Позже элемент снова анимируется при появлении
});
  1. Изменения стилей при уходе элемента с экрана:
document.addEventListener('aos:out', function(event) {
    const element = event.detail;
    element.style.opacity = 0.3; // Делает элемент менее заметным
});
  1. Триггера сторонних функций или логики:
document.addEventListener('aos:out', function(event) {
    const element = event.detail;
    myCustomFunction(element);
});

function myCustomFunction(el) {
    // Любая логика, например, подсчёт ушедших с экрана элементов
    console.log('Элемент ушёл с экрана:', el.id);
}

Совместное использование с aos:in

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

document.addEventListener('aos:in', function(event) {
    const el = event.detail;
    el.style.opacity = 1; // Элемент полностью видим
});

document.addEventListener('aos:out', function(event) {
    const el = event.detail;
    el.style.opacity = 0.5; // Элемент частично или полностью покинул экран
});

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

Важные особенности и ограничения

  • Событие aos:out не срабатывает до инициализации AOS. Инициализация должна быть выполнена через AOS.init():
AOS.init({
    duration: 800,
    once: false, // Позволяет анимации повторно срабатывать
});
  • Параметр once: true отключает повторное срабатывание анимации и, соответственно, события aos:out для повторного выхода элемента.
  • Событие фиксирует уход элемента из видимой области, даже если элемент частично выходит за пределы экрана.

Практические сценарии применения

  1. Отслеживание скрытия баннеров или секций при прокрутке — полезно для аналитики.
  2. Активация lazy-load контента — подгрузка элементов при уходе предыдущих.
  3. Интерактивные интерфейсы с изменением состояния элементов — изменение цвета, размеров или прозрачности при уходе с экрана.
  4. Комплексные анимационные эффекты — например, элементы, которые исчезают, а затем снова появляются с другим визуальным эффектом.

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

Оглавление