Закрепление на время сцены

В ScrollMagic закрепление элемента на определённое время реализуется через свойство duration сцены. Когда создаётся сцена с закреплением, элемент фиксируется на экране в момент, когда триггер достигает заданной позиции, и остаётся закреплённым на протяжении указанной длительности.

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при котором начинается закрепление
    duration: 300 // длина закрепления в пикселях прокрутки
})
.setPin("#pinned-element") // элемент, который будет закреплён
.addTo(controller);

Пояснение ключевых параметров:

  • triggerElement — элемент, относительно которого вычисляется начало сцены.
  • duration — длина закрепления, измеряется в пикселях прокрутки; если 0 или не указан, элемент закрепляется только на момент входа триггера.
  • setPin(element) — фиксирует элемент на время сцены.

При использовании duration ScrollMagic автоматически создаёт пространственный «буфер», в котором элемент остаётся закреплённым, после чего он возвращается в обычное поведение.

Взаимодействие закрепления с другими эффектами

Закрепление можно комбинировать с анимациями через TweenMax или GSAP. Например, элемент может менять прозрачность или масштаб во время закрепления.

var tween = TweenMax.to("#pinned-element", 1, {scale: 1.5, opacity: 0.5});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400
})
.setTween(tween)
.setPin("#pinned-element")
.addTo(controller);

В данном примере:

  • Элемент масштабируется и изменяет прозрачность одновременно с закреплением.
  • Анимация синхронизирована с прокруткой: прогресс сцены определяет состояние tween.

Использование pushFollowers

По умолчанию закрепление элемента «толкает» последующие элементы вниз, создавая эффект сдвига контента. Это поведение можно контролировать с помощью опции pushFollowers.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300,
    pushFollowers: false
})
.setPin("#pinned-element")
.addTo(controller);
  • pushFollowers: true (по умолчанию) — последующие элементы сдвигаются вниз на время закрепления.
  • pushFollowers: false — закрепление не влияет на положение соседних элементов.

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

Иногда длительность сцены должна зависеть от размера контента или других условий. В ScrollMagic duration можно задавать как функцию:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: function() {
        return document.querySelector("#content").offsetHeight;
    }
})
.setPin("#pinned-element")
.addTo(controller);

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

Многоступенчатые закрепления

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

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 200
})
.setPin("#pinned-element")
.addTo(controller);

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 400
})
.setPin("#pinned-element")
.addTo(controller);

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

Влияние закрепления на производительность

  • Использование большого числа закреплённых элементов может снижать плавность прокрутки.
  • Желательно ограничивать количество активных сцена и использовать will-change: transform для элементов, которые закрепляются, чтобы браузер оптимизировал рендеринг.
#pinned-element {
    will-change: transform;
}
  • При комбинировании закрепления и сложных анимаций предпочтительно использовать GSAP, поскольку ScrollMagic эффективно синхронизируется с ним.

Отслеживание состояния закрепления

События сцены позволяют реагировать на начало и конец закрепления:

scene.on("enter", function() {
    console.log("Элемент закреплён");
});

scene.on("leave", function() {
    console.log("Элемент откреплён");
});
  • enter срабатывает при достижении триггера.
  • leave срабатывает, когда сцена завершает свой прогресс.

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

Закрепление на весь экран

Для закрепления элемента на весь видимый экран можно задать duration: "100%":

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: "100%"
})
.setPin("#full-screen-element")
.addTo(controller);
  • ScrollMagic автоматически пересчитывает пиксели прокрутки, соответствующие высоте окна.
  • При изменении размеров окна сцена корректно адаптируется, сохраняя эффект закрепления.
Оглавление