Последовательная анимация карточек

Для начала работы с библиотекой AOS необходимо подключить CSS и JS файлы. Можно использовать локальные файлы или подключение через CDN:

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

После подключения необходимо инициализировать библиотеку в скрипте:

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

Параметры duration, easing и once позволяют тонко настроить поведение анимации и делают её более плавной и естественной.

Основные атрибуты для элементов

Для применения анимации к элементу используется атрибут data-aos. Примеры базовых значений:

<div data-aos="fade-up">Карточка 1</div>
<div data-aos="fade-right">Карточка 2</div>
<div data-aos="zoom-in">Карточка 3</div>

Ключевые атрибуты:

  • data-aos – тип анимации (fade-up, fade-down, fade-left, fade-right, zoom-in, flip-left и другие).
  • data-aos-delay – задержка начала анимации в миллисекундах.
  • data-aos-duration – длительность анимации индивидуально для элемента.
  • data-aos-offset – расстояние от верхней границы окна браузера до момента срабатывания анимации.
  • data-aos-easing – тип ускорения для конкретного элемента.

Эти атрибуты позволяют гибко управлять последовательностью и внешним видом анимации отдельных карточек.

Последовательная анимация карточек

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

Пример последовательного появления карточек с интервалом 200 мс:

<div class="card" data-aos="fade-up" data-aos-delay="0">Карточка 1</div>
<div class="card" data-aos="fade-up" data-aos-delay="200">Карточка 2</div>
<div class="card" data-aos="fade-up" data-aos-delay="400">Карточка 3</div>
<div class="card" data-aos="fade-up" data-aos-delay="600">Карточка 4</div>

Важно, чтобы каждая карточка имела одинаковый тип анимации для плавного эффекта “лесенки”, а data-aos-delay увеличивался на постоянный интервал.

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

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

.card {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

AOS работает с любыми HTML-элементами, поэтому комбинация с CSS Grid или Flexbox позволяет создавать сложные сетки карточек с упорядоченной анимацией.

Динамическое управление задержкой через JS

Если количество карточек заранее неизвестно или генерируется динамически, удобно вычислять data-aos-delay программно:

const cards = document.querySelectorAll('.card');
cards.forEach((card, index) => {
  card.setAttribute('data-aos', 'fade-up');
  card.setAttribute('data-aos-delay', index * 200);
});
AOS.refresh(); // обновление библиотеки после динамических изменений

Метод AOS.refresh() необходим для пересчёта позиции элементов и корректного срабатывания анимаций после добавления элементов в DOM.

Продвинутые техники последовательной анимации

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

    <div data-aos="fade-right" data-aos-delay="0">Карточка 1</div>
<div data-aos="fade-left" data-aos-delay="200">Карточка 2</div>
<div data-aos="fade-right" data-aos-delay="400">Карточка 3</div>

  2. Контроль направления и скорости через CSS переменные

    .card {
  --aos-duration: 800ms;
  --aos-easing: ease-in-out;
}

  3. Использование data-aos-offset для активации анимации до появления элемента полностью

    <div data-aos="fade-up" data-aos-offset="100">Карточка</div>

  4. Анимация при повторном скролле Если нужно, чтобы карточки анимировались каждый раз при прокрутке:

    AOS.init({
  once: false
});

Практический пример: сетка карточек с последовательной анимацией

<div class="cards-container">
  <div class="card" data-aos="zoom-in" data-aos-delay="0">Карточка 1</div>
  <div class="card" data-aos="zoom-in" data-aos-delay="150">Карточка 2</div>
  <div class="card" data-aos="zoom-in" data-aos-delay="300">Карточка 3</div>
  <div class="card" data-aos="zoom-in" data-aos-delay="450">Карточка 4</div>
</div>
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 calc(25% - 20px);
  padding: 20px;
  background: #f7f7f7;
  border-radius: 10px;
  text-align: center;
}

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

Советы по оптимизации производительности

  • Использовать once: true для предотвращения постоянного срабатывания анимаций при прокрутке.
  • Минимизировать количество тяжелых эффектов на странице с большим количеством карточек.
  • Комбинировать AOS с CSS-переходами для плавного и лёгкого рендеринга.
  • Динамически загружать анимации только для видимой области с помощью data-aos-offset.

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

Оглавление