Настройка внешнего вида индикаторов

ScrollMagic предоставляет мощные инструменты для создания анимаций, привязанных к скроллу страницы. Одним из вспомогательных элементов при разработке является индикатор сцены (Indicators), который помогает визуально отследить, когда сцена активируется и как она взаимодействует с DOM. По умолчанию индикаторы имеют стандартный вид, но библиотека позволяет полностью настраивать их внешний вид с помощью CSS и параметров инициализации.

Подключение индикаторов

Индикаторы подключаются через метод addIndicators() объекта сцены:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 200
})
.addIndicators({name: "My Scene"})
.addTo(controller);

В данном примере создается сцена, длительность которой составляет 200 пикселей, и добавляется индикатор с подписью "My Scene".

Ключевые параметры метода addIndicators():

  • name — текстовая подпись для сцены;
  • colorStart — цвет верхней границы индикатора;
  • colorEnd — цвет нижней границы индикатора;
  • colorTrigger — цвет линии, соответствующей триггеру;
  • indent — отступ индикатора от левой границы страницы;
  • parent — элемент DOM, в который будет вставлен индикатор (по умолчанию body).

Настройка цветов и отступов

Индикаторы можно стилизовать с помощью встроенных параметров:

scene.addIndicators({
  name: "Custom Scene",
  colorStart: "#FF0000",
  colorEnd: "#0000FF",
  colorTrigger: "#00FF00",
  indent: 20
});
  • colorStart обозначает верхнюю границу сцены, активируемую при начале скролла.
  • colorEnd показывает нижнюю границу сцены, когда сцена завершается.
  • colorTrigger визуализирует линию триггера и помогает точно определить момент начала действия сцены.
  • indent позволяет сместить индикатор вправо для удобства визуализации при множественных сценах.

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

По умолчанию индикатор добавляется в <body>, но можно выбрать любой контейнер для визуализации:

scene.addIndicators({
  name: "Scene in container",
  parent: "#indicator-container",
  colorStart: "orange",
  colorEnd: "purple",
  colorTrigger: "yellow"
});

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

Стилизация через CSS

Хотя ScrollMagic автоматически применяет цвета из параметров, можно полностью контролировать внешний вид индикаторов через CSS.

Основные CSS-классы индикаторов:

  • .scrollmagic-indicator — общий контейнер индикатора;
  • .scrollmagic-indicator-start — верхняя граница сцены;
  • .scrollmagic-indicator-end — нижняя граница сцены;
  • .scrollmagic-indicator-trigger — линия триггера;
  • .scrollmagic-indicator-name — текстовая подпись сцены.

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

.scrollmagic-indicator {
  border-radius: 5px;
  opacity: 0.8;
  font-family: "Arial", sans-serif;
  font-size: 12px;
}

.scrollmagic-indicator-start {
  border-top: 3px dashed #FF4500;
}

.scrollmagic-indicator-end {
  border-bottom: 3px dashed #1E90FF;
}

.scrollmagic-indicator-trigger {
  background-color: #32CD32;
  width: 2px;
}

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

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

В сложных проектах может потребоваться менять цвета или позицию индикаторов в процессе работы:

scene.on("enter", function () {
  document.querySelector(".scrollmagic-indicator-start").style.borderTopColor = "#FFD700";
});

scene.on("leave", function () {
  document.querySelector(".scrollmagic-indicator-start").style.borderTopColor = "#FF0000";
});

Это позволяет визуально отслеживать активные и неактивные сцены и использовать индикаторы не только для отладки, но и для динамического интерфейса.

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

При нескольких сценах индикаторы можно смещать с помощью параметра indent:

scene1.addIndicators({name: "Scene 1", indent: 0});
scene2.addIndicators({name: "Scene 2", indent: 30});
scene3.addIndicators({name: "Scene 3", indent: 60});

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

Советы по интеграции

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

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

Оглавление