Каскадные задержки для групп элементов

При работе с библиотекой AOS (Animate on Scroll) часто возникает задача анимации группы элементов с последовательным эффектом, когда каждый следующий элемент появляется с небольшой задержкой относительно предыдущего. Такой подход создаёт ощущение динамичного потока и упрощает визуальное восприятие контента. В AOS для реализации этого используется сочетание атрибутов data-aos-delay и специальных методов генерации задержек через JavaScript.

Использование data-aos-delay

Атрибут data-aos-delay задаёт задержку старта анимации в миллисекундах. Стандартное применение для одного элемента выглядит так:

<div data-aos="fade-up" data-aos-delay="200">
  Элемент с задержкой 200 мс
</div>

Здесь анимация fade-up начнётся через 200 мс после того, как элемент попадёт в область видимости. Для группы элементов можно прописывать разные задержки вручную:

<div data-aos="fade-up" data-aos-delay="0">Элемент 1</div>
<div data-aos="fade-up" data-aos-delay="100">Элемент 2</div>
<div data-aos="fade-up" data-aos-delay="200">Элемент 3</div>
<div data-aos="fade-up" data-aos-delay="300">Элемент 4</div>

Такой подход эффективен для небольших списков, но становится трудоёмким при большом количестве элементов. В таких случаях рекомендуется динамическое присвоение задержек через JavaScript.

Динамическая генерация задержек через JavaScript

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

document.addEventListener("DOMContentLoaded", () => {
  const items = document.querySelectorAll('.aos-group .aos-item');
  const delayStep = 100; // задержка между элементами в мс

  items.forEach((item, index) => {
    item.setAttribute('data-aos', 'fade-up');
    item.setAttribute('data-aos-delay', index * delayStep);
  });

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

В этом примере:

  • items — коллекция элементов внутри контейнера с классом .aos-group.
  • delayStep задаёт интервал задержки между элементами.
  • index * delayStep обеспечивает каскадное появление каждого следующего элемента.

Такой подход позволяет легко управлять числом элементов и интервалом задержки без ручного указания data-aos-delay.

Использование пользовательских атрибутов для сложных каскадов

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

<div class="aos-item" data-group="1">Элемент A1</div>
<div class="aos-item" data-group="1">Элемент A2</div>
<div class="aos-item" data-group="2">Элемент B1</div>
<div class="aos-item" data-group="2">Элемент B2</div>

И скрипт для расчёта задержек по группам:

document.addEventListener("DOMContentLoaded", () => {
  const groups = {};
  const items = document.querySelectorAll('.aos-item');

  items.forEach((item) => {
    const group = item.getAttribute('data-group') || 'default';
    if (!groups[group]) groups[group] = [];
    groups[group].push(item);
  });

  Object.values(groups).forEach(groupItems => {
    groupItems.forEach((item, index) => {
      const delay = index * 150; // шаг задержки 150 мс
      item.setAttribute('data-aos', 'fade-right');
      item.setAttribute('data-aos-delay', delay);
    });
  });

  AOS.init({ duration: 700, easing: 'ease-out', once: false });
});

Таким образом, можно создавать независимые каскадные анимации для разных секций страницы без дублирования кода.

Совмещение с различными эффектами анимации

Каскадные задержки работают с любыми анимациями AOS: fade-up, fade-down, fade-left, fade-right, zoom-in, flip-left и др. Например:

<div class="aos-group">
  <div class="aos-item" data-aos="fade-left">Элемент 1</div>
  <div class="aos-item" data-aos="fade-left">Элемент 2</div>
  <div class="aos-item" data-aos="fade-left">Элемент 3</div>
</div>

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

Настройка параметров AOS для каскадных эффектов

Основные опции, влияющие на каскадные анимации:

  • duration – продолжительность анимации. Увеличение значения создаёт более плавное появление элементов.
  • delay – глобальная задержка. Можно комбинировать с индивидуальными data-aos-delay.
  • once – включение режима однократного срабатывания. Для лендингов часто используется true.
  • easing – функция сглаживания. Рекомендуется ease-in-out для естественного эффекта каскада.
  • offset – точка срабатывания анимации относительно окна браузера. Полезно для длинных списков элементов.

Пример инициализации:

AOS.init({
  duration: 600,
  easing: 'ease-in-out',
  once: true,
  offset: 120
});

Практические рекомендации

  • Для больших списков оптимально использовать шаг задержки 50–150 мс.
  • Не следует задавать слишком большие задержки, чтобы не нарушить скорость восприятия информации.
  • Для адаптивного дизайна можно пересчитывать задержку через window.innerWidth, уменьшая шаг на мобильных устройствах.
  • Каскадные анимации лучше комбинировать с одинаковым типом анимации для единообразного визуального ритма.

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

Оглавление