Параметры инициализации

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

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

var controller = new ScrollMagic.Controller({
    globalSceneOptions: {},
    container: window,
    vertical: true,
    loglevel: 2,
    refreshInterval: 100
});

  • globalSceneOptions — объект с параметрами, которые автоматически применяются ко всем сценам, создаваемым через этот контроллер. Позволяет избежать повторного задания одних и тех же опций для каждой сцены. Примеры свойств: triggerHook, duration, offset.

  • container — определяет элемент, внутри которого отслеживается прокрутка. По умолчанию — window. Можно использовать любой блок с прокруткой (div, section), если требуется анимация внутри конкретного контейнера.

  • vertical — булево значение, задающее направление прокрутки. true — вертикальная прокрутка, false — горизонтальная. Влияет на расчёт позиции триггера и продолжительности сцен.

  • loglevel — уровень логирования:

    • 0 — без логов,
    • 1 — только ошибки,
    • 2 — предупреждения и ошибки,
    • 3 — полное логирование всех событий и состояния сцен.

  • refreshInterval — интервал в миллисекундах, с которым ScrollMagic автоматически обновляет позиции триггеров. Важно при динамическом изменении DOM, например, при подгрузке контента или изменении размеров элементов.

Параметры сцены (ScrollMagic.Scene)

Сцена (Scene) — это основная единица, которая связывает позицию прокрутки с анимацией или классами CSS. При создании сцены можно задать множество параметров, влияющих на её поведение:

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

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

  • triggerElement — элемент, относительно которого будет срабатывать сцена. Может быть CSS-селектором или DOM-элементом. ScrollMagic отслеживает позицию этого элемента внутри контейнера контроллера.

  • triggerHook — точка на экране, где активируется сцена. Значение от 0 (верх экрана) до 1 (низ экрана). По умолчанию 0.5 (середина экрана).

  • duration — длина сцены в пикселях (для вертикальной прокрутки) или в процентах. Определяет, на каком участке прокрутки будет происходить эффект или анимация. Если указано 0, сцена считается моментальной и срабатывает один раз при пересечении триггера.

  • offset — смещение начала сцены относительно позиции триггера. Например, offset: 100 запустит сцену на 100 пикселей позже, чем положение триггерного элемента.

  • reverse — булево значение, которое определяет, можно ли проигрывать анимацию обратно при прокрутке вверх. true — сцена активируется в обе стороны, false — только при прокрутке вниз.

Дополнительные параметры и опции

  1. tweenChanges — если используется анимация с помощью TweenMax или GSAP, этот параметр позволяет обновлять значения анимации плавно при изменении прокрутки, а не мгновенно.

  2. loglevel — можно задавать для каждой сцены отдельно. Позволяет детально отслеживать срабатывания только конкретной сцены.

  3. enabled — активная сцена (true) или временно отключена (false). Позволяет программно управлять сценой без удаления её из контроллера.

  4. scope — внутренний параметр, редко используется, указывает, как сцена связана с контроллером, обычно автоматически определяется при добавлении сцены в контроллер.

Взаимодействие контроллера и сцены

После инициализации контроллера и сцены сцена привязывается к контроллеру с помощью метода .addTo():

scene.addTo(controller);
  • При этом сцена получает все глобальные параметры контроллера (globalSceneOptions).
  • Контроллер начинает отслеживать позицию триггерного элемента относительно контейнера прокрутки.
  • Если заданы анимации через setTween, анимация автоматически синхронизируется с прокруткой.

Пример с анимацией TweenMax:

var tween = gsap.to("#box", {x: 500, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400,
    triggerHook: 0.3
})
.setTween(tween)
.addTo(controller);

Здесь движение блока #box на 500 пикселей синхронизировано с прокруткой от точки triggerHook: 0.3 и на протяжении 400 пикселей прокрутки.

Практические рекомендации по инициализации

  • Использовать globalSceneOptions для общих параметров, чтобы не дублировать настройки для каждой сцены.
  • Выбирать подходящий контейнер прокрутки, если работа происходит не с window. Это критично для мобильных интерфейсов и фиксированных блоков.
  • Настраивать refreshInterval при динамическом контенте, чтобы позиции триггеров всегда были актуальны.
  • Включать reverse: false для однократных анимаций, например, появления текста или изображений при скролле.
  • Логировать сцены при отладке через loglevel: 3, а в продакшене снижать уровень до 0 для оптимизации.

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

Оглавление