Параллакс-эффекты с AOS

Для использования библиотеки AOS необходимо подключить её CSS и JS файлы. Обычно подключение производится в <head> и перед закрывающим тегом </body> соответственно:

<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>

После подключения выполняется инициализация:

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

Параметры duration, easing, once и mirror позволяют гибко управлять поведением эффектов и являются основными при работе с параллакс-эффектами.

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

AOS реализует параллакс через атрибуты data-aos. Для элементов параллакса важно указывать следующие параметры:

  • data-aos — задаёт тип анимации. Для параллакса часто используются:

    • fade-up, fade-down, fade-left, fade-right — элементы смещаются с постепенным проявлением.
    • zoom-in, zoom-out — создаёт эффект приближения или удаления.

  • data-aos-offset — смещение старта анимации относительно начала видимой области. Позволяет запускать анимацию раньше или позже появления элемента.

  • data-aos-delay — задержка анимации в миллисекундах.

  • data-aos-duration — индивидуальная длительность анимации для конкретного элемента.

  • data-aos-easing — задаёт кривую easing для элемента.

  • data-aos-anchor-placement — определяет точку, относительно которой происходит активация анимации (top-bottom, center-center и др.).

Пример параллакс-эффекта с задержкой:

<div data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
    Контент с параллакс-анимацией
</div>

Комбинирование анимаций для глубины

Для создания эффекта глубины используют несколько слоёв элементов с разными параметрами анимации:

<div class="parallax-layer" data-aos="fade-up" data-aos-duration="800"></div>
<div class="parallax-layer" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200"></div>
<div class="parallax-layer" data-aos="fade-up" data-aos-duration="1600" data-aos-delay="400"></div>

Чем больше различие в duration и delay, тем сильнее ощущается движение слоёв при скролле. Такой подход имитирует классический параллакс, когда ближние слои движутся быстрее, а дальние — медленнее.

Использование кастомных смещений

AOS позволяет управлять смещением элементов по оси Y с помощью CSS-переменных и transform:

.parallax-layer {
    transform: translateY(var(--parallax-offset, 0px));
    transition: transform 0.5s ease-out;
}
window.addEventListener('scroll', () => {
    const layers = document.querySelectorAll('.parallax-layer');
    layers.forEach((layer, index) => {
        const offset = window.scrollY * (0.1 * (index + 1));
        layer.style.setProperty('--parallax-offset', `${offset}px`);
    });
});

Такой метод комбинирует стандартный AOS с кастомной прокруткой, создавая плавный и настраиваемый параллакс.

Синхронизация с другими библиотеками

Часто AOS используется совместно с GSAP или ScrollTrigger для более сложных эффектов. Пример:

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.parallax-layer').forEach(layer => {
    gsap.to(layer, {
        y: '+=100',
        scrollTrigger: {
            trigger: layer,
            start: 'top bottom',
            end: 'bottom top',
            scrub: true
        }
    });
});

AOS отвечает за начальные анимации появления, а GSAP создаёт плавный параллакс в процессе прокрутки.

Практические советы

  • Для крупных страниц с множеством параллакс-слоёв важно оптимизировать duration и delay, чтобы не перегружать рендеринг.
  • Использовать once: true для элементов, которые не должны повторно анимироваться.
  • Комбинировать эффекты fade и translate для более естественного движения.
  • Проверять производительность на мобильных устройствах: параллакс с большим числом слоёв может снизить FPS.

Отладка и тестирование

  • Включить AOS.refresh() после динамической загрузки контента.
  • Использовать data-aos-anchor для точного позиционирования активации анимации относительно других элементов.
  • В браузере Chrome DevTools можно вручную регулировать scrollY для проверки параллакс-эффектов без скролла.

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

Оглавление