Визуализация триггеров

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

В ScrollMagic триггер определяется с помощью объекта сцены (Scene), который привязывается к контроллеру (Controller). Сцена отслеживает положение целевого элемента относительно окна просмотра и запускает события при пересечении заданного триггерного элемента (triggerElement) и триггерной позиции (triggerHook).

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#myElement", // Элемент, при пересечении которого срабатывает триггер
    triggerHook: 0.5,             // Позиция на экране: 0 = верх, 1 = низ, 0.5 = центр
    duration: 200                 // Длительность сцены в пикселях
})
.setClassToggle("#myElement", "active") // Добавление класса при срабатывании
.addTo(controller);

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

  • triggerElement — CSS-селектор или DOM-элемент, с которого начинается отслеживание. Если не указан, триггер считается привязанным к документу.
  • triggerHook — числовое значение от 0 до 1, определяющее вертикальное положение окна, где активируется триггер. Значение 0 соответствует верхней границе окна, 1 — нижней, 0.5 — середине.
  • duration — длина сцены в пикселях. При ненулевом значении триггер действует на протяжении прокрутки, а не мгновенно.

Типы событий, связанных с триггерами

Сцена ScrollMagic может реагировать на несколько типов событий, позволяя создавать гибкие анимации:

  • start — срабатывает при входе триггера в активную область.
  • end — срабатывает при выходе триггера из активной области.
  • enter — активируется при движении вниз к триггеру.
  • leave — активируется при движении вверх от триггера.
  • progress — обновляется непрерывно в течение всей сцены, возвращая значение от 0 до 1, соответствующее прогрессу прокрутки.
scene.on("enter", function (event) {
    console.log("Триггер вошёл в активную область");
});

scene.on("leave", function (event) {
    console.log("Триггер покинул активную область");
});

scene.on("progress", function (event) {
    console.log("Прогресс сцены: " + event.progress);
});

Анимации и управление классами через триггеры

Одной из самых популярных возможностей ScrollMagic является добавление и удаление классов на элементы в момент срабатывания триггера. Это позволяет интегрировать библиотеку с CSS-анимациями и трансформациями.

var scene = new ScrollMagic.Scene({
    triggerElement: "#animateElement",
    triggerHook: 0.7
})
.setClassToggle("#animateElement", "visible") // Элемент получает класс .visible при срабатывании
.addTo(controller);

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

Отладка триггеров

ScrollMagic предлагает инструмент addIndicators(), который визуализирует позиции триггеров на экране, облегчая точную настройку сцены:

scene.addIndicators({name: "My Scene"});

Индикаторы показывают:

  • точку входа триггера,
  • длину сцены (duration),
  • направление прокрутки.

Это особенно полезно при работе с комплексными макетами и несколькими сценами на одной странице.

Использование нескольких триггеров для одного элемента

Для достижения сложных визуальных эффектов часто требуется несколько триггеров для одного элемента:

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#box",
    triggerHook: 0.9
})
.setClassToggle("#box", "fadeIn")
.addTo(controller);

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#box",
    triggerHook: 0.1
})
.setClassToggle("#box", "fadeOut")
.addTo(controller);

В этом примере элемент сначала постепенно появляется, когда триггер достигает нижней части окна, и исчезает, когда достигает верхней.

Синхронизация анимаций с прокруткой

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

var tween = TweenMax.to("#scrollBox", 1, {x: 500}); // GSAP-анимация

var scene = new ScrollMagic.Scene({
    triggerElement: "#scrollBox",
    duration: 300
})
.setTween(tween)
.addTo(controller);

Здесь анимация перемещает элемент вправо на 500 пикселей в течение всей длины сцены (300px прокрутки). Значение progress сцены динамически управляет позицией элемента, создавая плавную реакцию на движение пользователя.

Заключение

Триггеры в ScrollMagic — это мощный инструмент для синхронизации визуальных эффектов с прокруткой. Управление параметрами triggerElement, triggerHook и duration позволяет точно настраивать момент активации анимации. События enter, leave, start, end и progress дают полное управление поведением элементов. Комбинация нескольких триггеров и интеграция с CSS или GSAP анимациями обеспечивает создание динамических, интерактивных интерфейсов.

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

Оглавление