Управление контроллером

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

var controller = new ScrollMagic.Controller();

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

  • container – элемент, внутри которого происходит скроллинг (по умолчанию window).
  • vertical – логический флаг направления скролла (true по умолчанию для вертикального скролла).
  • globalSceneOptions – объект с настройками по умолчанию для всех сцен, подключённых к этому контроллеру.
  • loglevel – уровень логирования (0 — отключено, 1 — ошибки, 2 — предупреждения, 3 — подробные логи).

Пример с кастомным контейнером и глобальными опциями:

var controller = new ScrollMagic.Controller({
    container: "#scrollContainer",
    vertical: true,
    globalSceneOptions: {triggerHook: 0.5},
    loglevel: 3
});

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

addScene(scene | scenes) Добавляет сцену или массив сцен в контроллер для отслеживания.

controller.addScene(myScene);
controller.addScene([scene1, scene2]);

removeScene(scene | scenes) Удаляет сцену или массив сцен из контроллера.

controller.removeScene(myScene);

update(force) Принудительно обновляет все сцены, позволяя синхронизировать анимации при изменении DOM.

controller.update(true);

scrollTo(position | element | selector) Позволяет программно прокручивать страницу до указанной позиции, элемента или селектора.

controller.scrollTo("#targetElement");
controller.scrollTo(500); // до 500px

Для использования кастомной анимации вместе с scrollTo необходимо задать обработчик:

controller.scrollTo(function(newPosition) {
    TweenMax.to(window, 1, {scrollTo: {y: newPosition}});
});

enabled([bool]) Включает или отключает работу контроллера. Если передан false, все сцены перестанут отслеживаться.

controller.enabled(false); // отключить
controller.enabled(true);  // включить

destroy([resetScenes]) Удаляет контроллер и, при необходимости, сбрасывает сцены к исходному состоянию.

controller.destroy(true);

Глобальные настройки сцен через контроллер

Использование globalSceneOptions позволяет задать одинаковые свойства для всех подключаемых сцен. Это упрощает код при наличии большого количества однотипных сцен.

var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
        duration: 200,
        triggerHook: 0.8
    }
});

При этом отдельные сцены могут переопределять эти значения:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 400 // переопределяет глобальный duration
}).addTo(controller);

Настройка событий контроллера

Контроллер поддерживает несколько ключевых событий:

  • change – вызывается при изменении любого свойства контроллера.
  • update – срабатывает при обновлении состояния сцены.
  • start / end – срабатывают при достижении начала или конца сцены.

Пример подписки на события:

controller.on("update", function(e) {
    console.log("Scroll position:", e.scrollPos);
});

controller.on("change", function(e) {
    console.log("Property changed:", e);
});

Управление несколькими сценами

Контроллер позволяет эффективно управлять большим количеством сцен. Важные моменты:

  • Можно подключать и отключать сцены динамически.
  • Порядок добавления сцен не влияет на работу, но может быть важен для последовательных анимаций.
  • Использование одного контроллера для всех сцен повышает производительность и упрощает отладку.
var scene1 = new ScrollMagic.Scene({triggerElement: "#sec1"}).addTo(controller);
var scene2 = new ScrollMagic.Scene({triggerElement: "#sec2"}).addTo(controller);

controller.removeScene(scene1); // удаление сцены без разрушения контроллера

Работа с кастомными контейнерами

Контроллер позволяет отслеживать скролл не только окна браузера, но и внутренних элементов с прокруткой. Для этого задаётся параметр container.

var controller = new ScrollMagic.Controller({
    container: "#scrollableDiv"
});

Внутренний скролл отслеживается автоматически, а сцены ведут себя так же, как если бы скролл происходил в window.

Практические рекомендации

  • Для одного документа достаточно одного контроллера. Множественные контроллеры могут вызвать конфликт в событиях и снижать производительность.
  • Использовать globalSceneOptions для повторяющихся параметров — это уменьшает дублирование кода.
  • При динамическом изменении DOM применять controller.update(true) для корректного пересчёта позиций сцен.
  • Для плавного скролла через scrollTo интегрировать с анимационными библиотеками типа GSAP или Anime.js.

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

Оглавление