Индикаторы прогресса

Индикаторы прогресса — это визуальные элементы, показывающие пользователю степень прохождения анимации или скролл-сцены. В ScrollMagic индикаторы реализуются с помощью методов addIndicators из плагина debug.addIndicators.js. Они не влияют на логику работы сцены, но позволяют визуально отследить старт, конец и текущую позицию сцены.

Ключевые параметры индикаторов:

name — текстовое название сцены, отображаемое на индикаторе.
colorStart — цвет индикатора начала сцены.
colorEnd — цвет индикатора конца сцены.
colorTrigger — цвет триггерной точки сцены.
indent — отступ от левого края страницы для размещения индикатора.

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 500
})
.addIndicators({name: "Scene 1", colorStart: "green", colorEnd: "red"})
.addTo(controller);

В этом примере создается сцена с продолжительностью 500 пикселей. Индикатор показывает триггер (#section1) зеленым цветом и конец сцены красным.

Настройка позиции и визуальных свойств индикатора

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

.addIndicators({
    name: "Scene 2",
    colorStart: "blue",
    colorEnd: "orange",
    indent: 50
})

Индикатор будет смещен на 50 пикселей вправо. Также можно использовать CSS для тонкой настройки, например изменение шрифта или прозрачности:

.scrollmagic-indicators {
    font-size: 12px;
    opacity: 0.7;
}

Отслеживание прогресса сцены

Метод on("progress", callback) позволяет отслеживать текущий прогресс сцены и синхронизировать его с другими элементами страницы, например, с полосой прокрутки или анимацией:

scene.on("progress", function(event) {
    console.log("Progress: " + event.progress); // значение от 0 до 1
    document.querySelector("#progressBar").style.width = (event.progress * 100) + "%";
});

Особенности:

event.progress всегда находится в диапазоне 0–1.
Прогресс динамически обновляется при скролле.
Можно использовать для запуска CSS-анимаций или изменения стилей элементов в зависимости от текущего положения сцены.

Сочетание индикаторов с множественными сценами

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

var scene1 = new ScrollMagic.Scene({triggerElement: "#sec1", duration: 300})
    .addIndicators({name: "Sec 1", colorStart: "green", colorEnd: "blue", indent: 0})
    .addTo(controller);

var scene2 = new ScrollMagic.Scene({triggerElement: "#sec2", duration: 400})
    .addIndicators({name: "Sec 2", colorStart: "purple", colorEnd: "pink", indent: 30})
    .addTo(controller);

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

Динамическое управление видимостью индикаторов

Индикаторы можно скрывать или удалять после разработки. Для динамического контроля достаточно манипулировать DOM элементами с классом .scrollmagic-indicators:

document.querySelectorAll(".scrollmagic-indicators").forEach(function(el) {
    el.style.display = "none"; // скрыть все индикаторы
});

Интеграция с CSS-анимациями и прогресс-барами

Прогресс сцены легко связывается с визуальными элементами страницы:

var scene = new ScrollMagic.Scene({triggerElement: "#section", duration: 600})
    .on("progress", function(e) {
        document.querySelector(".progress-line").style.transform = "scaleX(" + e.progress + ")";
    })
    .addTo(controller);

Важно:

transform: scaleX() идеально подходит для создания горизонтальных полос прогресса.
Для вертикальных прогресс-баров можно использовать scaleY().
Связка индикатора и прогресса позволяет наблюдать не только визуальное прохождение сцены, но и ее количественное состояние для сложных анимационных эффектов.