Концепция закрепления

В ScrollMagic закрепление (pinning) позволяет фиксировать элемент на экране на время определённого интервала прокрутки. Это ключевой инструмент для создания эффектов параллакса, интерактивных скролл-анимаций и “sticky” элементов, когда контент остаётся видимым, пока не завершится определённая анимация.

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

Для закрепления элемента необходимо создать сцену (Scene) и использовать метод .setPin():

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

// Создание сцены
var scene = new ScrollMagic.Scene({
  triggerElement: "#section1", // элемент, с которого начинается сцена
  duration: 500 // длительность закрепления в пикселях прокрутки
})
.setPin("#pinned-element") // закрепляемый элемент
.addTo(controller);
  • triggerElement — элемент, относительно которого начинается сцена.
  • duration — длина сцены в пикселях, пока элемент остаётся закреплённым. Если duration равна 0, элемент закрепляется мгновенно, пока пользователь прокручивает начало сцены.
  • setPin() — основной метод закрепления. Может принимать как CSS-селектор, так и DOM-элемент.

Фиксация на весь экран

Для эффекта “full-screen pin” элемент может быть закреплён на всю высоту экрана:

var scene = new ScrollMagic.Scene({
  triggerElement: "#fullscreen-section",
  duration: window.innerHeight
})
.setPin("#fullscreen-element")
.addTo(controller);

При изменении размера окна желательно обновлять duration, чтобы закрепление оставалось корректным:

window.addEventListener("resize", function() {
  scene.duration(window.innerHeight);
});

Опции закрепления

Метод .setPin() поддерживает дополнительные опции:

  • pushFollowers (по умолчанию true) — если true, элементы после закреплённого будут “отталкиваться”, создавая пространство. Если false, следующие элементы могут накладываться на закреплённый.
  • spacer — позволяет заменить закреплённый элемент на placeholder, чтобы избежать смещения контента. Обычно используется по умолчанию.

Пример с опциями:

scene.setPin("#pinned-element", {
  pushFollowers: false,
  spacer: "#placeholder"
});

Использование с анимациями

Закрепление часто комбинируется с Tween.js или GSAP для плавных анимаций во время прокрутки. Например, изменение прозрачности закреплённого элемента:

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

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

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

Советы по производительности

  • Избегать закрепления большого числа элементов одновременно.
  • Если сцена не содержит анимации, можно устанавливать duration: 0 для минимальной нагрузки.
  • Использовать pushFollowers: false в случаях, когда не нужно сдвигать последующий контент.
  • Всегда учитывать адаптивность: закреплённые элементы должны корректно отображаться на мобильных устройствах с разной высотой экрана.

Закрепление нескольких элементов

Можно создавать несколько сцен с разными элементами на одной странице:

var sections = document.querySelectorAll(".section");
sections.forEach(function(section) {
  new ScrollMagic.Scene({
    triggerElement: section,
    duration: 400
  })
  .setPin(section)
  .addTo(controller);
});

Каждая секция будет фиксироваться независимо, создавая цепочку “приклеенных” блоков, что часто используется в лендингах и презентационных страницах.

Взаимодействие с триггерами

Закреплённые элементы могут быть связаны с событиями сцены:

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

scene.on("leave", function () {
  console.log("Элемент отпущен");
});

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

Особенности и ограничения

  • Закрепление работает только с вертикальной прокруткой. Для горизонтальной прокрутки требуется использовать horizontal: true в контроллере.
  • Не рекомендуется закреплять элементы внутри overflow-контейнеров с overflow: hidden, так как это может нарушить расчёт позиции.
  • В сочетании с CSS position: sticky закрепление ScrollMagic может конфликтовать; чаще используют одно из решений.

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

Оглавление