Архитектура библиотеки

ScrollMagic — это мощная JavaScript-библиотека для управления анимациями на основе прокрутки страницы. Основная концепция строится вокруг сцен (scenes) и контроллера (controller), которые совместно создают управляемый поток событий и анимаций.

Контроллер (Controller)

Контроллер является сердцем ScrollMagic. Его задача — отслеживать положение прокрутки и управлять всеми подключенными сценами. Контроллер создается через конструктор:

var controller = new ScrollMagic.Controller({
    vertical: true,
    globalSceneOptions: {triggerHook: 0.5}
});

Ключевые параметры:

  • vertical — определяет направление прокрутки (по умолчанию true для вертикальной прокрутки).
  • globalSceneOptions — позволяет задать общие настройки для всех сцен, подключенных к контроллеру.

Контроллер также поддерживает несколько функций для динамического управления сценами:

  • addScene(scene) — добавляет сцену к контроллеру.
  • removeScene(scene) — удаляет сцену.
  • updateScene(scene) — обновляет состояние сцены при изменении параметров.
  • scrollTo(position) — программно прокручивает страницу к указанной позиции.

Контроллер может работать с несколькими сценами одновременно, что делает его идеальным инструментом для сложных анимационных эффектов.

Сцены (Scene)

Сцена — это объект, который определяет условия, при которых будет происходить анимация или запуск события. Каждая сцена привязывается к определенному триггеру (trigger) на странице и имеет набор опций.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 200,
    offset: 50,
    triggerHook: 0.8
})
.setClassToggle("#animate", "visible")
.addTo(controller);

Основные свойства сцены:

  • triggerElement — элемент, при достижении которого сцена активируется.
  • duration — длина сцены в пикселях. Если не указано, сцена считается моментальной.
  • offset — смещение триггера относительно начала сцены.
  • triggerHook — точка на экране, при достижении которой сцена срабатывает. Значение от 0 (верх экрана) до 1 (низ экрана).

Методы сцены:

  • .setClassToggle(element, className) — автоматически добавляет или удаляет класс в зависимости от положения сцены.
  • .setTween(tween) — связывает сцену с анимацией, например, через библиотеку GSAP.
  • .addIndicators() — полезный инструмент для отладки, визуализирует положение сцены.
  • .on(event, callback) — подписка на события: enter, leave, start, end, progress.

Сцены могут быть моментальными (trigger срабатывает мгновенно) и протяженными (duration > 0, анимация привязана к прокрутке).

Триггеры и хук-позиции

Триггер — это элемент, который запускает сцену. Hook — это точка на экране, где триггер срабатывает. Значение triggerHook задается в диапазоне от 0 до 1:

  • 0 — верх экрана.
  • 0.5 — центр экрана.
  • 1 — низ экрана.

При комбинировании offset и triggerHook можно точно настроить момент активации сцены, что важно для сложных параллакс-эффектов и синхронизации с другими анимациями.

Связывание со сторонними анимациями

ScrollMagic часто используется совместно с анимационными библиотеками, такими как GSAP (GreenSock Animation Platform). Связка делается через метод .setTween():

var tween = gsap.to("#box", {x: 400, duration: 1});
var scene = new ScrollMagic.Scene({triggerElement: "#trigger"})
              .setTween(tween)
              .addTo(controller);

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

Управление жизненным циклом сцен

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

  • enter — пользователь прокрутил страницу и сцена активировалась.
  • leave — пользователь покинул область сцены.
  • start — начало сцены (если duration > 0).
  • end — конец сцены.
  • progress — процент выполнения сцены (от 0 до 1), полезно для динамического изменения анимации.

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

Группировка и повторное использование сцен

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

document.querySelectorAll(".item").forEach(function(elem){
    new ScrollMagic.Scene({
        triggerElement: elem,
        triggerHook: 0.9
    })
    .setClassToggle(elem, "active")
    .addTo(controller);
});

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

Архитектурные особенности

  1. Контроллер-центризм — все сцены управляются через один или несколько контроллеров, что упрощает синхронизацию.
  2. Сцена как единица работы — каждая сцена полностью автономна и описывает свои условия активации и действия.
  3. Событийная модель — ScrollMagic использует подписку на события для гибкого управления поведением элементов.
  4. Интеграция с анимационными библиотеками — сцены могут напрямую работать с Tween-ами или любыми другими анимационными объектами.
  5. Декларативность через методы сцены — методы .setClassToggle(), .setTween(), .addIndicators() упрощают создание анимаций без вмешательства в DOM напрямую.

Архитектура ScrollMagic строится на принципах модульности, событийности и привязки к прокрутке, что делает её удобной для построения сложных, отзывчивых интерфейсов с богатой анимацией. Каждая часть библиотеки — контроллер, сцена, триггер, хук и tween — играет определённую роль в создании динамических и интерактивных веб-страниц.

Оглавление