Цветовая маркировка

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

Настройка контроллера

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

var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 0.5
    }
});

Здесь triggerHook задаёт точку срабатывания сцены относительно окна просмотра. Значение 0.5 соответствует середине экрана. Цветовая маркировка напрямую зависит от состояния сцены: активная сцена может подсвечиваться одним цветом, завершённая — другим.

Создание сцены с индикатором

Сцена — это основной строительный блок ScrollMagic. Она связывает конкретный элемент DOM с анимацией и событиями прокрутки:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300
})
.setClassToggle("#section1", "active")
.addIndicators({name: "Section 1", colorStart: "#ff0000", colorEnd: "#00ff00"})
.addTo(controller);

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

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

Индикаторы создаются только для отладки и не влияют на производительность или поведение анимации в продакшене.

Управление цветами через CSS

Хотя addIndicators предоставляет базовые цвета, для более сложного визуального оформления можно использовать CSS. ScrollMagic создаёт элементы с классами .scrollmagic-indicator, .scrollmagic-start, .scrollmagic-end:

.scrollmagic-indicator {
    opacity: 0.7;
    font-size: 12px;
    padding: 2px 4px;
}

.scrollmagic-start {
    background-color: blue !important;
}

.scrollmagic-end {
    background-color: green !important;
}

Это позволяет полностью контролировать стиль индикаторов: от формы до прозрачности и шрифтов. Такой подход полезен при работе с множеством сцен и различными цветами для каждой из них.

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

Цвета можно менять динамически на основе состояния сцены или других условий. ScrollMagic предоставляет события enter, leave и progress, которые можно использовать для изменения стиля индикаторов в реальном времени:

scene.on("enter", function(event) {
    document.querySelector(".scrollmagic-start").style.backgroundColor = "orange";
});

scene.on("leave", function(event) {
    document.querySelector(".scrollmagic-start").style.backgroundColor = "red";
});

scene.on("progress", function(event) {
    let progressColor = `rgb(${Math.floor(255 * event.progress)}, 0, 0)`;
    document.querySelector(".scrollmagic-indicator").style.backgroundColor = progressColor;
});

Здесь используется свойство event.progress, которое возвращает значение от 0 до 1, отражающее степень прокрутки сцены. Это позволяет реализовать плавное изменение цвета, синхронизированное с движением страницы.

Советы по визуальной отладке

  1. Минимизировать количество цветов — слишком яркие и разнообразные цвета могут отвлекать и затруднять восприятие.
  2. Использовать контрастные оттенки — начальный и конечный цвета сцены должны быть различимы даже при небольшой длительности сцены.
  3. Совмещать с классами активного состояния — изменение цвета индикатора и добавление класса на элемент DOM упрощает отладку и позволяет тестировать поведение анимаций.
  4. Выключать индикаторы в продакшене — метод addIndicators предназначен только для разработки. Для этого можно использовать условные проверки на window.location.hostname.

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

Комбинирование TweenMax или GSAP-анимаций с цветовой маркировкой позволяет видеть синхронизацию визуальных эффектов и прокрутки. Пример:

var tween = gsap.to("#section1", {x: 200, rotation: 360, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 500
})
.setTween(tween)
.addIndicators({name: "Anim Section", colorStart: "#0000ff", colorEnd: "#ff00ff"})
.addTo(controller);

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

Практические рекомендации по управлению множественными сценами

При работе с несколькими сценами важно использовать разные цвета для каждого блока, чтобы визуально разделять их. Также полезно использовать метод .setClassToggle вместе с индикаторами, чтобы видеть сразу изменения на элементе и на индикаторе.

new ScrollMagic.Scene({triggerElement: "#section2", duration: 400})
.setClassToggle("#section2", "highlight")
.addIndicators({name: "Section 2", colorStart: "#ff8800", colorEnd: "#88ff00"})
.addTo(controller);

Такой подход облегчает отладку сложных страниц с длинной прокруткой и множественными анимационными эффектами.

Оглавление