Конфигурация сцены

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

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

triggerElement Элемент DOM, который служит точкой активации сцены. Прокрутка до этого элемента инициирует действия, связанные со сценой.
```
var scene = new ScrollMagic.Scene({
    triggerElement: "#section1"
});
```
Особенности:
- Может быть CSS-селектором или самим DOM-элементом.
- Если не задан, сцена привязывается к началу документа.
triggerHook Определяет положение триггерного элемента относительно окна просмотра, при котором срабатывает сцена. Возможные значения:
- Число от 0.0 до 1.0 (доля высоты окна)
- Строковые значения: "onEnter" (0.0), "onCenter" (0.5), "onLeave" (1.0)
```
var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    triggerHook: 0.8
});
```
duration Длительность сцены в пикселях или процентах высоты окна, определяет, на какой протяжённости прокрутки сцена активна.
```
var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 500 // пикселей
});
```
Особенности:
- Если duration = 0, сцена срабатывает мгновенно при достижении триггера.
- Для анимаций с течением времени задаётся ненулевое значение.
offset Смещение точки триггера относительно triggerElement. Положительное значение сдвигает триггер вниз, отрицательное — вверх.
```
var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    offset: 100
});
```

Методы управления сценой

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

setTween() Связывает сцену с анимацией, используя сторонние библиотеки (например, GSAP).

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

addIndicators() Включает визуальные индикаторы для отладки сцен. Полезно для понимания позиции триггеров и длины сцены.
```
scene.addIndicators({name: "Scene 1"});
```
setPin() Закрепляет элемент на время действия сцены. Эффект «прилипания» элемента при прокрутке.
```
scene.setPin("#header");
```
addTo(controller) Добавляет сцену в контроллер ScrollMagic, который управляет всеми сценами страницы.
```
var controller = new ScrollMagic.Controller();
scene.addTo(controller);
```

События сцены

Сцена может реагировать на несколько событий прокрутки:

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

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

scene.on("enter", function(event) {
    console.log("Сцена началась!");
});

scene.on("progress", function(event) {
    console.log("Прогресс:", event.progress);
});

Динамическая настройка сцены

Свойства сцены можно изменять после её создания:

scene.duration(700) — изменяет длительность сцены.
scene.offset(50) — изменяет смещение триггера.
scene.triggerHook(0.2) — изменяет положение триггерного хука.

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

Комбинирование свойств

Оптимальная конфигурация часто включает сочетание нескольких параметров:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: "50%",        // 50% высоты окна
    triggerHook: "onCenter",
    offset: 100
})
.setPin("#section2 .title")
.setTween(gsap.to("#section2 .image", {x: 300, opacity: 1}))
.addIndicators({name: "Section 2"})
.addTo(controller);

В этом примере:

Сцена активна на 50% высоты окна.
Элемент .title закрепляется на месте.
Анимация .image запускается в течение действия сцены.
Индикаторы помогают отладить положение триггера.