Галереи и слайдеры

Для интеграции библиотеки AOS (Animate on Scroll) с галереями и слайдерами необходимо корректно подключить скрипт и стили. Библиотека распространяется через CDN или локальные файлы:

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

После подключения требуется инициализация в основном JavaScript-файле или внутри блока <script>:

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

Использование AOS в сетках галерей

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

<div class="gallery">
  <div class="gallery-item" data-aos="fade-up" data-aos-delay="100">
    <img src="image1.jpg" alt="Пример 1">
  </div>
  <div class="gallery-item" data-aos="fade-up" data-aos-delay="200">
    <img src="image2.jpg" alt="Пример 2">
  </div>
  <div class="gallery-item" data-aos="fade-up" data-aos-delay="300">
    <img src="image3.jpg" alt="Пример 3">
  </div>
</div>

Ключевые моменты:

  • data-aos="fade-up" — тип анимации (можно использовать fade-down, zoom-in, flip-left и др.).
  • data-aos-delay — задержка анимации, полезно для последовательного появления элементов.
  • Использование разных эффектов для соседних элементов позволяет создать динамичную и живую галерею.

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

Интеграция с слайдерами

Слайдеры (например, на базе Swiper, Slick или Owl Carousel) часто подгружают элементы динамически. В таких случаях необходимо перезапускать AOS после изменения слайдера, чтобы новые слайды получили анимацию:

const swiper = new Swiper('.swiper-container', {
  loop: true,
  on: {
    slideChangeTransitionEnd: () => {
      AOS.refresh(); // обновление анимаций для видимых слайдов
    }
  }
});

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

Настройка анимаций для слайдеров

Слайдеры предоставляют возможность применять разные анимации для активного слайда и соседних. Например:

<div class="swiper-slide" data-aos="fade-right">
  <img src="slide1.jpg" alt="Слайд 1">
</div>
<div class="swiper-slide" data-aos="fade-left">
  <img src="slide2.jpg" alt="Слайд 2">
</div>

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

Продвинутые техники

  1. Последовательная анимация элементов галереи: при большом количестве изображений удобно создавать цикл, который добавляет data-aos-delay программно, увеличивая задержку для каждого последующего элемента:
document.querySelectorAll('.gallery-item').forEach((el, index) => {
  el.setAttribute('data-aos-delay', index * 100);
});

  1. Сложные комбинации эффектов: можно сочетать fade, zoom и slide внутри одной галереи, чтобы создать эффект «живой мозаики».

  2. Анимация при прокрутке внутри контейнера с overflow: если галерея находится внутри скроллируемого блока (overflow: auto), AOS требует указания кастомного контейнера:

AOS.init({
  container: document.querySelector('.scrollable-gallery')
});
  1. Адаптивность: для мобильных устройств часто используют более простые анимации (fade вместо zoom или flip), чтобы уменьшить нагрузку на рендеринг и сохранить плавность.

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

  • Использовать once: true, чтобы анимации не срабатывали повторно при скролле, экономя ресурсы.
  • Минимизировать количество сложных анимаций одновременно — большое количество элементов с flip или zoom может тормозить мобильные устройства.
  • Для больших галерей оптимально лениво подгружать изображения (loading="lazy") вместе с анимацией, чтобы не блокировать рендеринг.

Заключение по интеграции

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

Оглавление