Создание базовой сцены

ScrollMagic — это мощная библиотека для создания интерактивных анимаций на основе прокрутки страницы. В основе работы лежит концепция сцены (Scene) и контроллера (Controller). Контроллер отслеживает прокрутку, сцены определяют, какие действия должны выполняться при достижении определённой позиции на странице.

// Создание контроллера
var controller = new ScrollMagic.Controller();

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

Создание сцены

Сцена задаёт границы активации анимации: triggerElement, duration и offset.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // Элемент, при котором сцена активируется
    duration: 200,              // Длина сцены в пикселях прокрутки
    offset: 50                  // Смещение относительно начала элемента
});
  • triggerElement — элемент DOM, достижение которого запускает сцену.
  • duration — протяжённость сцены в пикселях прокрутки; если указано 0, сцена срабатывает мгновенно.
  • offset — дополнительное смещение от начала triggerElement. Позволяет точнее контролировать момент активации.

Добавление анимации к сцене

Для анимации обычно используют библиотеку GSAP, но ScrollMagic поддерживает и другие способы управления стилями. С помощью метода .setTween() можно привязать анимацию к сцене:

scene.setTween("#animate", {opacity: 1, y: -50, duration: 1});
  • #animate — элемент, который анимируется.
  • opacity: 1, y: -50 — свойства анимации: прозрачность и смещение по вертикали.
  • duration: 1 — длительность анимации в секундах (для GSAP).

Анимация будет проигрываться в течение всей длины сцены. Если duration сцены равна нулю, анимация проиграется мгновенно при активации.

Привязка сцены к контроллеру

Чтобы сцена начала работать, её необходимо добавить в контроллер:

scene.addTo(controller);

После добавления сцены в контроллер ScrollMagic автоматически отслеживает прокрутку и запускает действия сцены. Несколько сцен могут использовать один и тот же контроллер, что позволяет строить комплексные скролл-анимации.

Использование классов для визуальных эффектов

ScrollMagic позволяет добавлять или удалять CSS-классы при активации сцены с помощью метода .setClassToggle():

scene.setClassToggle("#animate", "visible");
  • #animate — целевой элемент.
  • visible — класс, который добавляется при активации сцены и удаляется при выходе.

Это удобно для простых анимаций на CSS, например, плавное появление элементов или изменение их стилей при скролле.

События сцены

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

scene.on("enter", function(event) {
    console.log("Сцена активирована");
});

scene.on("leave", function(event) {
    console.log("Сцена деактивирована");
});

scene.on("progress", function(event) {
    console.log("Прогресс сцены:", event.progress);
});
  • enter — срабатывает при входе в сцену.
  • leave — срабатывает при выходе из сцены.
  • progress — срабатывает при прокрутке сцены, возвращает значение прогресса от 0 до 1.

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

Параметры сцены для тонкой настройки

  • reverse — по умолчанию true. Определяет, должна ли сцена проигрываться в обратном направлении при прокрутке вверх.
  • tweenChanges — если true, анимация плавно изменяется при изменении прогресса.
  • loglevel — уровень логирования для отладки (0 — выключено, 3 — максимум).

Пример с дополнительными параметрами:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300,
    offset: 100,
    reverse: true
});
scene.setTween("#animate", {opacity: 1, x: 100, duration: 1, ease: "power1.inOut"});
scene.addTo(controller);

Последовательность действий при создании базовой сцены

  1. Создать контроллер (ScrollMagic.Controller).
  2. Определить сцену (ScrollMagic.Scene) с параметрами triggerElement, duration и offset.
  3. Добавить к сцене анимацию через .setTween() или CSS-класс через .setClassToggle().
  4. Подписаться на события при необходимости (enter, leave, progress).
  5. Добавить сцену в контроллер (.addTo(controller)).

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

Оглавление