Параметр mirror

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

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

Параметр задается при инициализации AOS:

AOS.init({
  mirror: true
});

или индивидуально для конкретного элемента через атрибут HTML:

<div data-aos="fade-up" data-aos-mirror="true">
  Контент с анимацией
</div>

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

  • true — анимация повторяется при прокрутке вниз и вверх.
  • false (значение по умолчанию) — анимация срабатывает только один раз при первом появлении элемента в области видимости.

Как работает mirror

По умолчанию AOS выполняет анимацию один раз, когда элемент появляется на экране. Параметр mirror изменяет это поведение следующим образом:

  1. Элемент появляется в области видимости — срабатывает анимация.
  2. Элемент уходит за пределы экрана при прокрутке вверх или вниз.
  3. Если mirror включен, анимация будет срабатывать снова при повторном появлении элемента на экране.

Пример поведения:

AOS.init({
  duration: 1200, // длительность анимации
  mirror: true     // повтор при обратной прокрутке
});

При этом можно комбинировать mirror с другими параметрами, такими как once, offset и delay, чтобы создавать сложные анимационные последовательности.

Особенности и рекомендации

  • Производительность: включение mirror увеличивает количество срабатываний анимации, что может повлиять на производительность страницы при большом количестве элементов. Для оптимизации следует использовать разумное количество анимируемых блоков или сокращать длительность анимации.
  • Совместимость с once: параметр once: true игнорирует mirror. Если необходимо повторение анимаций, once должен быть отключен (false).
  • Использование на динамически добавленных элементах: при добавлении новых элементов через JavaScript, необходимо вызывать AOS.refresh() для корректной работы mirror.
// Добавление элемента динамически
const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-left');
document.body.appendChild(newElement);

// Обновление AOS
AOS.refresh();
  • Анимации с mirror и задержкой (delay): задержка применяется каждый раз при повторном появлении элемента, что позволяет создавать последовательные эффекты для элементов, видимых несколько раз.

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

Вертикальные списки с повторной анимацией:

<ul>
  <li data-aos="fade-up" data-aos-mirror="true">Пункт 1</li>
  <li data-aos="fade-up" data-aos-mirror="true" data-aos-delay="100">Пункт 2</li>
  <li data-aos="fade-up" data-aos-mirror="true" data-aos-delay="200">Пункт 3</li>
</ul>

Блоки галереи с повторной анимацией при скролле:

<div class="gallery-item" data-aos="zoom-in" data-aos-mirror="true">
  Изображение 1
</div>
<div class="gallery-item" data-aos="zoom-in" data-aos-mirror="true" data-aos-delay="150">
  Изображение 2
</div>

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

Заключение по функциональности параметра mirror

  • Позволяет сделать анимации повторяемыми при повторном появлении элементов на экране.
  • Важно учитывать нагрузку на производительность при большом количестве элементов.
  • Гибко сочетается с другими параметрами, включая delay, duration и offset.
  • Требует корректного обновления при динамическом добавлении элементов.

Параметр mirror является мощным инструментом для создания интерактивных интерфейсов с многократными анимационными эффектами, что особенно полезно для лендингов, галерей и списков контента с высокой визуальной динамикой.

Оглавление