Привязка к элементам

ScrollMagic предоставляет мощный механизм управления анимациями и эффектами при прокрутке, позволяя привязывать события к конкретным элементам на странице. Основной концепт заключается в создании сцены (Scene), которая отслеживает положение элемента относительно области просмотра (viewport) и запускает соответствующие действия.

Создание сцены с привязкой к элементу

Для начала необходимо создать экземпляр контроллера:

var controller = new ScrollMagic.Controller();

Далее создаётся сцена, где ключевым параметром является triggerElement — элемент, относительно которого будет происходить срабатывание сцены.

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

Пояснения:

  • triggerElement может быть либо CSS-селектором, либо прямым DOM-элементом.
  • triggerHook определяет точку на экране, где произойдёт срабатывание (например, 0.5 — центр окна).
  • duration задаёт область действия сцены: если указано 0, событие срабатывает единожды при достижении триггера; если больше 0 — сцена будет активной на протяжении указанного числа пикселей.

Различные типы триггеров

  1. Одинарное срабатывание: Сцена с duration: 0 добавляет эффект при достижении триггера и сразу завершает работу.
new ScrollMagic.Scene({
    triggerElement: "#header",
    duration: 0
})
.setClassToggle("#logo", "visible")
.addTo(controller);
  1. Пролистываемая сцена: Когда duration больше нуля, сцена остаётся активной, пока прокрутка не выйдет за пределы зоны действия.
new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 400
})
.setTween("#box", {scale: 1.5}) // Анимация GSAP
.addTo(controller);
  1. События на enter/leave: ScrollMagic поддерживает события .on("enter") и .on("leave") для тонкого контроля:
scene.on("enter", function () {
    console.log("Элемент вошёл в зону видимости");
});
scene.on("leave", function () {
    console.log("Элемент покинул зону видимости");
});

Привязка к множественным элементам

Чтобы применять эффекты к группе элементов, можно использовать цикл:

document.querySelectorAll(".animate-item").forEach(function(el) {
    new ScrollMagic.Scene({
        triggerElement: el,
        triggerHook: 0.8
    })
    .setClassToggle(el, "visible")
    .addTo(controller);
});

Это позволяет создавать каскадные эффекты или последовательные анимации для списка элементов при прокрутке.

Использование triggerHook для точной привязки

triggerHook принимает значения от 0 до 1:

  • 0 – верх окна
  • 0.5 – середина окна
  • 1 – низ окна

Примеры:

new ScrollMagic.Scene({
    triggerElement: "#feature",
    triggerHook: 0.2
})
.setClassToggle("#featureBox", "highlight")
.addTo(controller);

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

Комбинирование с анимациями GSAP

ScrollMagic отлично интегрируется с библиотекой GSAP для создания сложных анимаций:

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

new ScrollMagic.Scene({
    triggerElement: "#triggerPanel",
    duration: 500
})
.setTween(tween)
.addTo(controller);

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

Sticky элементы через setPin

Привязка к элементу может быть использована для создания «липких» блоков:

new ScrollMagic.Scene({
    triggerElement: "#stickySection",
    triggerHook: 0,
    duration: 600
})
.setPin("#stickyElement")
.addTo(controller);
  • setPin фиксирует элемент на экране на время действия сцены.
  • Продолжительность (duration) определяет, как долго элемент остаётся закреплённым.

Практические рекомендации

  • Всегда указывать контроллер, чтобы сцена знала, к какому скроллу привязана.
  • Использовать triggerHook для тонкой настройки момента срабатывания.
  • Для множественных элементов — использовать forEach и селекторы.
  • Для плавной анимации применять GSAP или другие библиотеки анимации, управляемые сценами ScrollMagic.
  • setPin эффективно использовать для фиксированных баннеров или интерактивных секций.

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

Оглавление