Атрибут data-aos-delay

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

Формат и синтаксис

<div data-aos="fade-up" data-aos-delay="500">
    Содержимое блока
</div>
  • data-aos — указывает тип анимации (fade-up, fade-down, fade-left, fade-right, zoom-in и др.).
  • data-aos-delay — задержка в миллисекундах перед запуском анимации. В примере выше анимация начнётся через 500 мс после того, как элемент появится в зоне видимости.

Особенности:

  • Значение указывается только в миллисекундах, например: 100, 250, 1000.
  • По умолчанию, если data-aos-delay не задан, задержка равна 0 мс.
  • Анимации с задержкой могут использоваться как для одиночных элементов, так и для последовательных списков или сеток.

Применение с последовательными элементами

Для создания эффекта пошагового появления элементов списка часто используют увеличение задержки на каждом элементе:

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

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

Совместное использование с data-aos-duration

Атрибут data-aos-duration определяет длительность анимации, а data-aos-delay — время ожидания перед её запуском. Их совместное использование позволяет создавать сложные последовательные анимации:

<div data-aos="fade-right" data-aos-delay="300" data-aos-duration="800">
    Контент блока
</div>

В этом примере элемент будет ждать 300 мс перед анимацией и анимироваться в течение 800 мс.

Ограничения и рекомендации

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

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

Для элементов, добавляемых на страницу через JavaScript после начальной загрузки, data-aos-delay будет работать только при инициализации AOS после добавления новых элементов:

// Добавление нового блока
const newBlock = document.createElement('div');
newBlock.setAttribute('data-aos', 'fade-up');
newBlock.setAttribute('data-aos-delay', '400');
newBlock.textContent = 'Новый блок';
document.body.appendChild(newBlock);

// Обновление AOS для новых элементов
AOS.refresh();

Метод AOS.refresh() необходим, чтобы библиотека пересчитала позиции новых элементов и корректно применила задержку.

Интеграция с CSS

Хотя библиотека AOS управляет задержкой через JavaScript, атрибут data-aos-delay можно комбинировать с CSS-переходами и transform для создания более сложных эффектов. Например, анимация с изменением прозрачности и смещением:

<div data-aos="fade-up" data-aos-delay="500" class="custom-block">
    Текст с кастомной анимацией
</div>
.custom-block {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

[data-aos].aos-animate.custom-block {
    transform: translateY(0);
    opacity: 1;
}

В этом примере data-aos-delay определяет, когда начнётся анимация, а CSS управляет визуальной трансформацией, обеспечивая плавное появление элемента.

Итоговые советы по data-aos-delay

  • Использовать для создания последовательных и синхронизированных анимаций.
  • Комбинировать с data-aos-duration для контроля скорости анимации.
  • Применять на динамически добавляемых элементах только после вызова AOS.refresh().
  • Проверять на разных разрешениях экрана для обеспечения стабильного эффекта.

Эффективное использование data-aos-delay позволяет создавать живые, интерактивные интерфейсы, делая страницы более динамичными и визуально привлекательными.

Оглавление