Добавление сцены к контроллеру

Контроллер в ScrollMagic является центральным элементом, который управляет всеми сценами. Он отслеживает прокрутку страницы и сообщает сценам о текущем положении скролла. Создание контроллера осуществляется через конструктор ScrollMagic.Controller:

var controller = new ScrollMagic.Controller();

Контроллер может быть настроен с различными параметрами:

  • vertical – направление прокрутки. По умолчанию true (вертикальная прокрутка).
  • globalSceneOptions – объект с общими параметрами для всех сцен, добавленных к контроллеру.
  • loglevel – уровень логирования (0–3), полезен при отладке.

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

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

triggerHook: 0.5 задаёт момент срабатывания сцены в середине окна просмотра.

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

Сцена в ScrollMagic описывает, как элемент реагирует на прокрутку. Сцена привязывается к контроллеру, а её основные параметры включают:

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

Пример базовой сцены:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300,
    offset: 50,
    triggerHook: 0.5
})
.setClassToggle("#section1", "active")
.addTo(controller);

Объяснение ключевых моментов:

  • setClassToggle – добавляет или убирает класс у элемента при входе и выходе сцены.
  • addTo(controller) – добавляет сцену к конкретному контроллеру. Без этой строки сцена не будет работать.

Методы сцены

ScrollMagic предоставляет множество методов для управления сценой:

  • setTween(tween) – привязывает анимацию, например через GSAP.
  • setPin(element, [settings]) – фиксирует элемент на время действия сцены.
  • addIndicators([options]) – добавляет визуальные индикаторы триггеров (только для разработки).
  • reverse([boolean]) – задаёт, будет ли анимация проигрываться обратно при скролле вверх.
  • destroy([reset]) – удаляет сцену, с возможностью сброса всех изменений.

Пример закрепления элемента:

var scene = new ScrollMagic.Scene({
    triggerElement: "#header",
    duration: 500
})
.setPin("#header")
.addTo(controller);

Закреплённый элемент остаётся на экране, пока сцена активна.

Работа с несколькими сценами

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

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

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 300
})
.setPin("#section2")
.addTo(controller);

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

Глобальные параметры контроллера

Параметр globalSceneOptions позволяет задавать общие настройки для всех сцен, что экономит код:

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

Все сцены, добавленные к этому контроллеру, будут наследовать эти параметры, если они не переопределены локально.

Взаимодействие сцены с анимациями

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

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

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

Порядок добавления сцены

  1. Создать контроллер.
  2. Создать сцену с необходимыми параметрами.
  3. Привязать сцены к контроллеру через addTo(controller).
  4. Настроить анимации, пины или классы с помощью методов setTween, setPin, setClassToggle.

Отладка и индикаторы

Для визуального контроля можно использовать индикаторы:

scene.addIndicators({
    name: "Scene 1",
    colorTrigger: "blue",
    colorStart: "green",
    colorEnd: "red"
});

Индикаторы показывают точку триггера, начало и конец сцены, что упрощает настройку сложных скролл-анимаций.

Примеры сложной сцены

Сцена с пином, анимацией и классами:

var tween = gsap.to("#panel", {duration: 1, y: 200, opacity: 0.5});
var scene = new ScrollMagic.Scene({
    triggerElement: "#panel",
    duration: 500,
    triggerHook: 0.2
})
.setPin("#panel")
.setTween(tween)
.setClassToggle("#panel", "active")
.addIndicators()
.addTo(controller);

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

Оглавление