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

Библиотека ScrollMagic позволяет создавать сложные анимации при прокрутке страницы, используя контроль над сценами, триггерами и анимационными событиями. Интеграция с CSS является ключевым элементом, поскольку она обеспечивает плавное и управляемое взаимодействие с визуальными элементами через классы и стили.

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

Один из наиболее распространённых способов — это добавление или удаление CSS-классов при наступлении определённого момента прокрутки. Для этого используется метод setClassToggle:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при достижении которого срабатывает сцена
    duration: 300,               // длина действия сцены (px)
    triggerHook: 0.5             // точка триггера (0 — верх, 1 — низ)
})
.setClassToggle("#animate", "visible") // добавление класса "visible"
.addTo(controller);

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

  • triggerElement — элемент, который запускает сцену.
  • duration — продолжительность сцены, может быть выражена в пикселях или процентах.
  • triggerHook — позиция триггера на экране, где 0.5 соответствует середине окна.
  • setClassToggle применяет CSS-класс, который можно использовать для запуска CSS-анимаций или переходов.

CSS-анимации могут быть описаны через transition или @keyframes:

#animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease-out;
}

#animate.visible {
    opacity: 1;
    transform: translateY(0);
}

Привязка анимации к прокрутке

Для более точного контроля можно использовать tween-анимации через библиотеку GSAP или нативные CSS-переменные. Например, с GSAP:

var tween = gsap.to("#animate", {
    y: 0,
    opacity: 1,
    duration: 1,
    ease: "power1.out"
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300,
    triggerHook: 0.5
})
.setTween(tween)
.addTo(controller);

Использование tween позволяет создавать плавные переходы состояния элементов, управляемые прокруткой, вместо простого добавления класса.

Контроль через CSS-переменные

ScrollMagic может изменять значения CSS-переменных для более гибкой анимации:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 500
})
.on("progress", function(e) {
    document.documentElement.style.setProperty('--scroll-progress', e.progress);
})
.addTo(controller);

В CSS можно использовать переменные для анимации свойств:

#animate {
    transform: translateY(calc(50px * (1 - var(--scroll-progress))));
    opacity: var(--scroll-progress);
    transition: transform 0.1s, opacity 0.1s;
}

Множественные классы и сцены

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

var scene1 = new ScrollMagic.Scene({ triggerElement: "#section1", duration: 200 })
    .setClassToggle("#box1", "active")
    .addTo(controller);

var scene2 = new ScrollMagic.Scene({ triggerElement: "#section2", duration: 200 })
    .setClassToggle("#box2", "active")
    .addTo(controller);

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

Адаптивность и медиазапросы

CSS-анимации, интегрированные с ScrollMagic, полностью поддерживают медиазапросы:

@media (max-width: 768px) {
    #animate.visible {
        transform: translateY(20px);
    }
}

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

if(window.innerWidth > 768) {
    var scene = new ScrollMagic.Scene({...})
        .setClassToggle("#animate", "visible")
        .addTo(controller);
}

Работа с параллакс-эффектами

CSS-классы и ScrollMagic позволяют создавать эффект параллакса, изменяя transform элементов в зависимости от прокрутки:

var scene = new ScrollMagic.Scene({ triggerElement: "#parallax-trigger", duration: 600 })
    .on("progress", function(e) {
        document.getElementById("parallax").style.transform = `translateY(${e.progress * 100}px)`;
    })
    .addTo(controller);

Это дает гибкий контроль движения объектов, полностью управляемый прокруткой.

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

  • Использовать will-change: transform; для элементов с анимацией.
  • Минимизировать количество сцен для тяжелых страниц.
  • Комбинировать сцены с CSS-трансформациями вместо JavaScript-анимаций, где возможно.
  • Поддерживать легкие классы и transitions, избегая сложных вычислений внутри обработчиков прокрутки.

Сводка по CSS-интеграции

  • setClassToggle — простой способ управлять анимациями через CSS-классы.
  • setTween и CSS-переменные позволяют точно синхронизировать анимацию с прокруткой.
  • Множественные сцены создают комплексные последовательные эффекты.
  • Адаптивные стили и параллакс обеспечивают динамичный и отзывчивый интерфейс.
  • Оптимизация через transform и will-change повышает производительность на всех устройствах.

Интеграция ScrollMagic с CSS превращает прокрутку страницы в мощный инструмент визуального повествования, позволяя управлять стилями и анимациями гибко, плавно и без лишнего кода.

Оглавление