Индикаторы загрузки

Индикаторы в ScrollMagic — это визуальные метки, которые помогают отследить, где именно на странице срабатывает сцена. Они особенно полезны при отладке сложных анимаций и при создании интерактивных эффектов на скролле. Индикаторы не влияют на функциональность сцены и предназначены исключительно для визуального контроля.

Для подключения индикаторов используется метод addIndicators(). Он вызывается на объекте сцены:

const scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 200,
    offset: 50
})
.setPin("#pin")
.addIndicators({name: "Пример сцены"})
.addTo(controller);

Параметры метода addIndicators()

Метод принимает объект с настройками, ключевые свойства которого:

  • name — текстовая метка для индикатора сцены. Используется для идентификации сцены при отладке.
  • colorStart — цвет индикатора в начале сцены. Значение по умолчанию — green.
  • colorEnd — цвет индикатора в конце сцены. Значение по умолчанию — red.
  • colorTrigger — цвет линии, показывающей позицию триггера. Значение по умолчанию — blue.
  • indent — отступ от края экрана, полезен при множественных индикаторах.

Пример с кастомизацией цветов:

scene.addIndicators({
    name: "Сцена с кастомными цветами",
    colorStart: "purple",
    colorEnd: "orange",
    colorTrigger: "yellow",
    indent: 20
});

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

Индикаторы отображают три ключевых элемента:

  1. Триггер — горизонтальная линия, показывающая точку, где срабатывает сцена.
  2. Начало и конец сцены — линии, соответствующие началу и завершению сцены.
  3. Название сцены — текстовая метка рядом с линиями, позволяет различать сцены при сложных интерфейсах.

Индикаторы обновляются автоматически при изменении параметров сцены, например triggerHook или duration.

scene.triggerHook(0.5); // центр экрана
scene.duration(400);    // сцена будет длиться 400px скролла
scene.update();         // обновляет индикаторы после изменения параметров

Множественные индикаторы на одной странице

При работе с несколькими сценами индикаторы не перекрывают друг друга благодаря параметру indent. Его использование позволяет выстроить визуальные метки в несколько рядов для удобного наблюдения.

const scene1 = new ScrollMagic.Scene({ triggerElement: "#trigger1", duration: 300 })
.addIndicators({name: "Сцена 1", indent: 0})
.addTo(controller);

const scene2 = new ScrollMagic.Scene({ triggerElement: "#trigger2", duration: 200 })
.addIndicators({name: "Сцена 2", indent: 50})
.addTo(controller);

Интеграция индикаторов с анимациями

Индикаторы можно использовать совместно с TweenMax или GSAP, чтобы видеть фактическое положение анимации на странице. Это особенно полезно при сложных параллакс-эффектах и pin-анимациях.

const tween = gsap.to("#animate", {y: 300, duration: 1});

const scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 500
})
.setTween(tween)
.addIndicators({name: "Анимация с TweenMax"})
.addTo(controller);

Принципы оптимизации работы с индикаторами

  • Индикаторы не рекомендуется оставлять на продакшн-сайте. Они предназначены только для разработки и отладки.
  • Для быстрого удаления всех индикаторов можно использовать метод .removeIndicators() для каждой сцены.
  • Индикаторы лучше использовать при визуальном тестировании сложных триггеров и длительных сцен, где трудно оценить положение элементов без визуальных меток.

Советы по визуальному анализу

  • Использовать разные цвета для начала и конца сцены помогает быстро понять, где начинается и заканчивается действие.
  • Названия сцен следует писать информативные, особенно при множественных сценах на странице.
  • Отступы (indent) предотвращают наложение индикаторов, делая отладку более наглядной.

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

Оглавление