Контроллеры и их роль

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

Создание контроллера

Для создания контроллера используется конструктор ScrollMagic.Controller. Базовый пример:

var controller = new ScrollMagic.Controller();

Контроллер может принимать объект с параметрами конфигурации:

var controller = new ScrollMagic.Controller({
    vertical: true,       // отслеживание вертикального скролла (по умолчанию true)
    globalSceneOptions: { // общие параметры для всех сцен
        triggerHook: 0.5
    },
    refreshInterval: 100  // интервал обновления контроллера в миллисекундах
});

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

  • vertical – определяет направление скролла. Если false, контроллер работает для горизонтального скролла.
  • globalSceneOptions – позволяет задать параметры, которые будут применены ко всем сценам, создаваемым через этот контроллер.
  • refreshInterval – задаёт частоту обновления внутренних вычислений положения сцен и триггеров.

Связь контроллера и сцен

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при достижении которого начинается анимация
    duration: 200,              // длина сцены в пикселях прокрутки
    offset: 50                  // смещение старта сцены относительно triggerElement
})
.setClassToggle("#animate", "visible") // добавление класса при активации сцены
.addTo(controller);                   // регистрация сцены в контроллере

Контроллер автоматически отслеживает положение прокрутки и обновляет состояния всех сцен, добавленных через метод .addTo(controller).

Управление обновлением сцены

Контроллер позволяет вручную обновлять положение сцен и пересчитывать триггеры:

controller.update(true); // форсированное обновление всех сцен

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

Подключение нескольких сцен

Один контроллер может управлять любым количеством сцен одновременно:

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

var scene2 = new ScrollMagic.Scene({ triggerElement: "#section2" })
    .setTween(TweenMax.to("#section2Content", 1, {opacity: 1}))
    .addTo(controller);

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

Методы контроллера

  • addScene(scene) – добавление отдельной сцены в контроллер.
  • removeScene(scene) – удаление сцены из контроля.
  • updateScene(scene, immediately) – обновление состояния конкретной сцены.
  • scrollTo(position) – программное перемещение скролла к указанной позиции.
  • destroy(deleteScenes) – уничтожение контроллера; если deleteScenes равен true, все сцены также удаляются.

События контроллера

Контроллер генерирует собственные события, позволяя отслеживать прокрутку и обновление сцен:

  • change – вызывается при изменении позиции скролла.
  • update – при обновлении всех сцен.
  • scroll – при движении скролла.
  • resize – при изменении размеров окна браузера.

Пример использования событий:

controller.on("update", function (e) {
    console.log("Текущее положение скролла:", e.scrollPos);
});

Роль контроллера в оптимизации

Контроллер выполняет оптимизацию производительности, предотвращая лишние вычисления при быстром скролле. Он управляет внутренними таймерами и кэширует позиции сцен, что позволяет плавно синхронизировать анимации даже при динамическом изменении DOM.

Итоговое понимание

Контроллер — это связующее звено между скроллом и сценами. Он:

  • регистрирует сцены и синхронизирует их с прокруткой;
  • обрабатывает события скролла и обновления;
  • позволяет управлять анимациями централизованно;
  • обеспечивает оптимизацию производительности и корректность анимаций при динамическом контенте.

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

Оглавление