Параметры пиннинга

Пиннинг (pinning) — это функциональность библиотеки ScrollMagic, позволяющая закреплять элементы на экране при прокрутке страницы. Элемент “прилипает” к позиции на экране на время выполнения сцены, а затем продолжает движение вместе с остальным контентом.

Простейшая структура пиннинга выглядит так:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300
})
.setPin("#pinElement")
.addTo(controller);

Здесь triggerElement — элемент, с которого начинается сцена, duration — длина сцены в пикселях, а setPin закрепляет указанный элемент.

Ключевые параметры метода setPin

1. pushFollowers

Параметр управляет смещением последующих элементов страницы при пиннинге. По умолчанию pushFollowers: true, что создаёт пространство под закреплённый элемент и не перекрывает последующий контент.

Пример:

.setPin("#pinElement", { pushFollowers: false })

Установка false делает пиннинг «абсолютным»: следующий контент перекрывается закреплённым элементом. Это полезно для создания эффектов наложения или параллакса.

2. spacerClass

Этот параметр задаёт CSS-класс для временного контейнера, создаваемого ScrollMagic для пиннинга. Spacer — это скрытый элемент, который занимает место закреплённого объекта, чтобы страница не «прыгала» при пиннинге.

Пример:

.setPin("#pinElement", { spacerClass: "custom-spacer" })

Использование собственного класса позволяет управлять стилями spacer-а, например, задавать высоту, отступы или фон.

Duration: продолжительность сцены и её влияние на пиннинг

duration определяет длину сцены в пикселях или процентах, в течение которой элемент остаётся закреплённым.

  • duration: 0 — элемент закрепляется на мгновение, эффект пиннинга почти не виден.
  • duration: "100%" — элемент остаётся закреплённым на всю высоту родительского контейнера.

Пример с процентной длиной:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "50%" // половина высоты viewport
})
.setPin("#pinElement")
.addTo(controller);

Пиннинг с динамической высотой

Можно использовать функцию для вычисления продолжительности сцены динамически:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: function () {
        return document.querySelector("#section1").offsetHeight;
    }
})
.setPin("#pinElement")
.addTo(controller);

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

Пиннинг нескольких элементов

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 400
})
.setPin("#element1")
.setPin("#element2", { pushFollowers: false }) 
.addTo(controller);

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

Взаимодействие с CSS-анимациями

Закреплённые элементы сохраняют свои стили CSS, и ScrollMagic не вмешивается в анимации, применяемые через transition или transform. Это позволяет комбинировать пиннинг с параллакс-эффектами и анимациями:

.setPin("#pinElement")
.on("enter", function () {
    document.querySelector("#pinElement").classList.add("fade-in");
});

Особенности и подводные камни

  • Высота контейнера: spacer автоматически задаёт высоту, равную закреплённому элементу. При изменении размеров элемента после инициализации сцены необходимо обновлять сцены методом scene.update().
  • Перекрытие элементов: при pushFollowers: false нужно учитывать порядок элементов в DOM, иначе контент может оказаться скрытым.
  • Совместимость с responsive: при изменении ширины экрана сцена может вести себя иначе. Рекомендуется использовать scene.refresh() после изменения размеров.

Методы управления пиннингом

  • .setPin(element, options) — закрепляет элемент с указанными параметрами.
  • .removePin(reset) — снимает пиннинг; если reset равно true, элемент возвращается в исходное положение.
  • .update() — пересчитывает позицию и размеры, полезно при динамическом контенте.

Пример:

scene.removePin(true); // возвращает элемент в исходное состояние
scene.update();        // пересчитывает текущую позицию

Выводы по параметрам пиннинга

  • pushFollowers управляет взаимодействием с последующим контентом.
  • spacerClass позволяет кастомизировать временный контейнер.
  • duration определяет, как долго элемент остаётся закреплённым.
  • Комбинация пиннинга с анимациями и параллакс-эффектами требует внимательного управления размерами и обновления сцены.

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

Оглавление