Расчет позиций триггеров

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

Типы триггеров

ScrollMagic использует несколько способов задания триггерной позиции:

Абсолютное положение на странице Триггер может быть задан как конкретная позиция в пикселях относительно верхнего края документа:
```
var scene = new ScrollMagic.Scene({
    triggerElement: "#element",
    triggerHook: 0.5 // от верхнего края окна
});
```
В этом случае элемент будет активировать сцену, когда верхняя граница элемента достигнет середины окна (triggerHook: 0.5).
Элемент как триггер Вместо числового значения можно использовать DOM-элемент: triggerElement. ScrollMagic автоматически вычисляет его вертикальное положение относительно документа и запускает сцену, когда скролл достигает этого места.
Относительные смещения Через свойство offset можно сдвинуть триггер относительно элемента:
```
var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    offset: 100
});
```
Положением триггера будет начало элемента плюс 100 пикселей вниз. Это удобно для последовательного включения анимаций внутри одного блока.

Понимание `triggerHook`

triggerHook определяет вертикальную точку на экране, при которой сцена считается активной:

0 – верх окна
0.5 – середина окна
1 – низ окна

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#box",
    triggerHook: 0.2
});

Сцена активируется, когда верх элемента достигает 20% от верхнего края окна.

Важно: сочетание triggerElement, offset и triggerHook позволяет точно настроить момент активации даже при сложных макетах.

Расчет позиций для динамических элементов

Если элементы страницы динамически изменяют размер или создаются после загрузки, позиции триггеров нужно пересчитывать. ScrollMagic предоставляет метод .update() для сцен:

scene.update(true); // пересчитать позиции триггеров и обновить состояние

В ситуациях с ленивой загрузкой изображений или динамическим контентом рекомендуется вызывать update() после полной загрузки контента.

Использование множественных триггеров

Для сложных анимаций часто требуется несколько сцен с разными триггерами для одного блока. Важно правильно расставлять смещения:

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#section",
    offset: 0,
    triggerHook: 0.8
});

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#section",
    offset: 200,
    triggerHook: 0.8
});

Первая сцена активируется раньше, вторая — чуть позже при дополнительном смещении. Такой подход позволяет создавать последовательные эффекты при скролле.

Примеры точного позиционирования

1. Фиксированный эффект «приклеивания» блока

var scene = new ScrollMagic.Scene({
    triggerElement: "#sticky",
    triggerHook: 0,
    duration: 300
})
.setPin("#sticky");

triggerHook: 0 – блок прилипает к верху окна, когда его верх достигает верха экрана
duration – длина приклеивания

2. Анимация появления при скролле

var scene = new ScrollMagic.Scene({
    triggerElement: "#fade",
    triggerHook: 0.9,
    offset: 50
})
.setClassToggle("#fade", "visible");

Блок плавно появляется, когда почти весь элемент виден в окне
Смещение offset корректирует момент старта