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

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

var controller = new ScrollMagic.Controller();

По умолчанию контроллер отслеживает вертикальный скролл (vertical: true) и реагирует на все сцены, подключенные к нему. Контроллер может быть создан с дополнительными настройками для более точного управления.

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

  • vertical (boolean) – определяет направление скролла. Значение true (по умолчанию) означает вертикальный скролл, false – горизонтальный.

  • globalSceneOptions (object) – объект с настройками, который автоматически применяется ко всем сценам, добавляемым в этот контроллер. Пример:

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

Здесь triggerHook: 0.5 устанавливает триггер в середину экрана, а reverse: true позволяет анимациям проигрываться в обратном направлении при прокрутке вверх.

  • container (string | HTMLElement) – позволяет указать нестандартный контейнер для скролла, отличный от window. Это полезно для прокрутки внутри блоков с overflow: scroll.
var controller = new ScrollMagic.Controller({
    container: "#scroll-container"
});

Добавление и удаление сцен

Контроллер управляет сценами через методы .addScene() и .removeScene(). В современных версиях библиотеки рекомендуется использовать .addScene() для добавления, а .removeScene() — для удаления конкретной сцены.

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

Удаление сцены:

controller.removeScene(scene);

Можно одновременно добавить несколько сцен, передав массив:

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

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

  • update() – обновляет все сцены. Необходим при изменении размеров страницы или динамическом добавлении контента.
controller.update(true); // принудительное обновление всех сцен
  • scrollTo() – позволяет программно прокручивать страницу до нужного элемента или позиции. Работает совместно с анимацией (например, через TweenMax).
controller.scrollTo(function (newpos) {
    TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
});
  • enabled() / enabled(true|false) – включает или отключает работу контроллера. Полезно для временной приостановки всех сцен.
controller.enabled(false); // отключает отслеживание скролла
  • info() – возвращает объект с текущей информацией о контроллере: направление скролла, текущую позицию и т.д.
console.log(controller.info("scrollPos")); // выводит текущую позицию скролла

Настройка производительности

Контроллер можно оптимизировать для большого количества сцен:

  • Использовать refreshInterval при создании контроллера:
var controller = new ScrollMagic.Controller({
    refreshInterval: 100 // обновление каждые 100ms
});

  • Отключать сцены, которые не нужны в данный момент (scene.enabled(false)), чтобы уменьшить нагрузку.

  • Использовать globalSceneOptions для сокращения повторяющихся настроек.

Работа с горизонтальным скроллом

Для горизонтального скролла создаётся контроллер с vertical: false:

var controller = new ScrollMagic.Controller({ vertical: false });

Сцены при этом должны иметь корректно настроенные размеры и триггеры, учитывающие горизонтальную ось.

Взаимодействие с другими библиотеками

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

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

Контроллер обеспечивает синхронизацию времени анимации с позицией скролла.

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

Оглавление