Подключение плагина indicators

Плагин Indicators является инструментом для визуальной отладки сцен в ScrollMagic. Он позволяет отображать на странице визуальные маркеры начала и конца сцены, а также текущее положение триггера. Это особенно полезно при создании сложных анимаций на основе скролла, когда необходимо точно контролировать момент срабатывания сцены.

Установка и подключение

Для использования плагина Indicators требуется подключение как основной библиотеки ScrollMagic, так и дополнительного скрипта для индикаторов. Порядок подключения критичен:

<!-- ScrollMagic core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

<!-- ScrollMagic indicators plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>

Важно, чтобы плагин индикаторов подключался после основной библиотеки ScrollMagic, иначе будет ошибка ScrollMagic is not defined.

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

После подключения плагина можно создать сцену с визуальными маркерами. Ключевой момент — это использование метода .addIndicators() при инициализации сцены.

// Инициализация контроллера
var controller = new ScrollMagic.Controller();

// Создание сцены
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // Элемент-триггер
    duration: 300,              // Продолжительность сцены
    offset: 50                  // Смещение начала сцены
})
.setPin("#pinElement")          // Закрепление элемента при прокрутке
.addIndicators({                // Включение индикаторов
    name: "Пример сцены",       // Название сцены
    colorTrigger: "blue",       // Цвет линии триггера
    colorStart: "green",        // Цвет начала сцены
    colorEnd: "red"             // Цвет конца сцены
})
.addTo(controller);

Пояснения к параметрам addIndicators:

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

Настройка отображения индикаторов

Индикаторы можно настраивать через CSS. ScrollMagic создает элементы с классами .scrollmagic-indicator, .scrollmagic-start, .scrollmagic-end, .scrollmagic-trigger. Пример кастомизации:

.scrollmagic-indicator {
    font-size: 12px;
    font-family: Arial, sans-serif;
}

.scrollmagic-start {
    border-left: 2px dashed green;
}

.scrollmagic-end {
    border-left: 2px dashed red;
}

.scrollmagic-trigger {
    border-left: 2px solid blue;
}

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

Применение при сложных анимациях

При работе с несколькими сценами индикаторы помогают:

  1. Проверять точное срабатывание каждой сцены.
  2. Видеть пересечение триггеров и длину каждой сцены.
  3. Отлаживать закрепление элементов с помощью .setPin().
  4. Отслеживать смещения (offset) и их влияние на анимацию.

Пример для нескольких сцен:

var controller = new ScrollMagic.Controller();

var scenes = [
    { trigger: "#section1", pin: "#pin1", duration: 200, name: "Сцена 1" },
    { trigger: "#section2", pin: "#pin2", duration: 300, name: "Сцена 2" }
];

scenes.forEach(function(cfg) {
    new ScrollMagic.Scene({
        triggerElement: cfg.trigger,
        duration: cfg.duration
    })
    .setPin(cfg.pin)
    .addIndicators({ name: cfg.name })
    .addTo(controller);
});

Таким образом можно визуально контролировать сразу несколько анимаций на странице и быстро выявлять конфликты между сценами.

Ограничения и рекомендации

  • Плагин Indicators предназначен только для разработки. На продакшн-сайтах его подключать не рекомендуется, так как он создает лишние DOM-элементы.
  • Для динамически создаваемых сцен индикаторы нужно добавлять после создания всех параметров сцены.
  • Если сцена закрепляет (pin) элемент, индикаторы учитывают его положение и правильно показывают границы сцены.

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

Оглавление