Анимация при скролле списков

Для использования анимации при скролле списков необходимо подключить библиотеку AOS к проекту. Обычно подключение происходит через CDN или установку через npm.

Подключение через 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>

Инициализация в Jav * aScript:

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

Разметка списков с анимацией

Списки могут быть неупорядоченными (ul), упорядоченными (ol) или кастомными блоками. Чтобы применять анимацию, к каждому элементу списка добавляется атрибут data-aos с типом анимации.

Пример неупорядоченного списка:

<ul>
  <li data-aos="fade-up">Первый элемент</li>
  <li data-aos="fade-up" data-aos-delay="100">Второй элемент</li>
  <li data-aos="fade-up" data-aos-delay="200">Третий элемент</li>
  <li data-aos="fade-up" data-aos-delay="300">Четвёртый элемент</li>
</ul>

Объяснение ключевых атрибутов:

  • 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. Рекомендуется увеличивать задержку на одинаковую величину для каждого последующего элемента.

Пример:

<ol>
  <li data-aos="fade-right" data-aos-delay="0">Пункт 1</li>
  <li data-aos="fade-right" data-aos-delay="100">Пункт 2</li>
  <li data-aos="fade-right" data-aos-delay="200">Пункт 3</li>
  <li data-aos="fade-right" data-aos-delay="300">Пункт 4</li>
</ol>

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

Анимация сложных списков с вложенными элементами

Для списков с вложенными списками (ul внутри li) или карточками внутри списков можно комбинировать разные эффекты анимации. При этом важно правильно назначать задержки и типы анимации, чтобы анимация не выглядела хаотично.

Пример вложенного списка:

<ul>
  <li data-aos="fade-up" data-aos-delay="0">
    Главный пункт 1
    <ul>
      <li data-aos="fade-left" data-aos-delay="100">Подпункт 1.1</li>
      <li data-aos="fade-left" data-aos-delay="200">Подпункт 1.2</li>
    </ul>
  </li>
  <li data-aos="fade-up" data-aos-delay="300">Главный пункт 2</li>
</ul>

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

  • Вложенные элементы могут иметь отдельные анимации.
  • Для синхронного эффекта задержки лучше задавать последовательность через data-aos-delay.
  • Тип анимации может отличаться для родителя и дочерних элементов, что создаёт более выразительную визуализацию.

Настройка повторного срабатывания

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

AOS.init({
  once: false // элементы будут анимироваться каждый раз при скролле
});

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

AOS.refresh();

Это обновляет все элементы, отмеченные data-aos, включая новые элементы.

Пользовательские эффекты через CSS

Для более гибкого контроля над анимацией списков можно комбинировать AOS с собственными CSS-анимациями:

.fade-up-custom {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-aos="fade-up-custom"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

В разметке:

<li data-aos="fade-up-custom" data-aos-delay="150">Кастомный элемент</li>

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

Адаптация под разные экраны

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

<li data-aos="fade-up" data-aos-offset="100">Элемент с небольшим смещением</li>
  • Меньшее значение offset — анимация срабатывает ближе к верху экрана.
  • Большее значение offset — элемент анимируется позже, при более глубокой прокрутке.

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

  1. Не перегружать страницу анимациями: большое количество одновременно анимируемых элементов может замедлить скролл.
  2. Использовать последовательные задержки (data-aos-delay) для создания плавного эффекта.
  3. Разные типы анимации для родителя и дочерних элементов делают список более выразительным.
  4. Комбинировать стандартные и кастомные эффекты через CSS для уникального визуального стиля.
  5. Проверять работу на мобильных устройствах и на разных разрешениях экрана, корректируя offset и duration.

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

Оглавление