Метод setPin

Метод setPin является ключевым инструментом библиотеки ScrollMagic, позволяя закреплять элементы на странице при прокрутке и создавать эффект «липкой» позиции. Он применяется к объекту сцены (Scene) и управляет поведением DOM-элемента в процессе скролла.

Основной синтаксис

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // Элемент, с которого начинается сцена
    duration: 500,              // Длительность закрепления в пикселях
    triggerHook: 0              // Положение триггера на экране (0 — верх)
})
.setPin("#pinElement")          // Элемент, который закрепляется
.addTo(controller);
  • triggerElement — элемент, при попадании которого в область видимости начинается сцена.
  • duration — продолжительность эффекта закрепления. Если не указано, элемент закрепляется на время появления триггера.
  • triggerHook — положение на экране, при котором срабатывает триггер. Значение от 0 (верх) до 1 (низ).
  • setPin(element, settings) — закрепляет переданный элемент. Вторым параметром можно передать объект с дополнительными настройками.

Параметры метода setPin

Метод принимает два аргумента:

  1. element — DOM-элемент или селектор, который нужно закрепить.
  2. settings — необязательный объект с настройками:
{
    pushFollowers: true,  // Элемент будет «толкать» последующие элементы
    spacerClass: "pin-spacer" // CSS-класс для создаваемого контейнера-обертки
}
  • pushFollowers (по умолчанию true) — если true, последующие элементы страницы будут сдвигаться вниз, чтобы не перекрываться закрепленным элементом. Если false, закрепленный элемент будет накладываться поверх контента.
  • spacerClass — позволяет задать кастомный класс для создаваемого spacer, который ScrollMagic вставляет для сохранения структуры документа при закреплении.

Работа с продолжительностью закрепления

Продолжительность (duration) определяет, на какое расстояние по скроллу элемент будет оставаться закрепленным. Она может задаваться как:

  • в пикселях: duration: 500 — 500px прокрутки;
  • в процентах от высоты окна: duration: "50%" — половина высоты окна;
  • динамически через функцию:
duration: function () {
    return document.querySelector("#section").offsetHeight;
}

Такой подход позволяет адаптировать закрепление под содержимое, которое может меняться по высоте.

Пример с несколькими элементами

var controller = new ScrollMagic.Controller();

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#trigger1",
    duration: 300
})
.setPin("#pin1")
.addTo(controller);

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#trigger2",
    duration: 500
})
.setPin("#pin2", { pushFollowers: false })
.addTo(controller);

Здесь два элемента закрепляются независимо друг от друга. Для второго элемента установлено pushFollowers: false, поэтому он не сдвигает следующий контент, а накладывается сверху.

Особенности и рекомендации

  • Spacer: при вызове setPin ScrollMagic создаёт обёртку (spacer) для сохранения исходного потока документа. Визуально это почти незаметно, но важно учитывать при работе с кастомной версткой.
  • Анимации внутри pinned-элемента: закрепленный элемент можно анимировать с помощью TweenMax или GSAP. Анимации будут выполняться относительно позиции элемента в сцене.
  • Реакция на изменение размера окна: ScrollMagic автоматически пересчитывает размеры и позиции pinned-элемента при ресайзе.
  • Nested pins: закрепление вложенных элементов может вызвать неожиданные сдвиги. Рекомендуется использовать отдельные сцены для каждого pinned-элемента.

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

Закрепление можно удалить с помощью метода .removePin():

scene.removePin(true); // true — удаляет spacer из DOM

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

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

Метод setPin тесно связан с triggerElement и triggerHook. Понимание этих параметров позволяет создавать сложные эффекты:

  • triggerHook: 0 — закрепление начинается, когда верх элемента достигает верха окна.
  • triggerHook: 0.5 — закрепление начинается при попадании элемента в середину окна.
  • triggerHook: 1 — закрепление начинается, когда нижняя граница элемента видна внизу окна.

Комбинация duration и triggerHook позволяет управлять точной позицией и временем закрепления.

Метод setPin — основной механизм ScrollMagic для создания sticky-панелей, параллакс-эффектов и интерактивных анимаций, управляемых скроллом. Он гибко настраивается через параметры сцены и настройки pinned-элемента, обеспечивая широкие возможности по взаимодействию с DOM.

Оглавление