spacerClass

В ScrollMagic каждый Scene автоматически создаёт вспомогательный элемент DOM, называемый spacer. Spacer — это пустой контейнер, который используется для управления позиционированием и отслеживанием прокрутки, когда сцена активна. Он предотвращает «скачки» контента и обеспечивает правильную работу анимаций на странице.

По умолчанию класс этого элемента — scrollmagic-pin-spacer, но его можно кастомизировать с помощью свойства spacerClass при создании сцены. Это полезно для стилизации или интеграции с существующими CSS-структурами.

Синтаксис и использование

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300,
    triggerHook: 0.5
})
.setPin("#pinElement", { spacerClass: "custom-spacer" })
.addTo(controller);

Объяснение параметров:

  • triggerElement — элемент, при достижении которого сцена активируется.
  • duration — длина сцены в пикселях (или процент от viewport).
  • triggerHook — точка на экране, где срабатывает сцена (0 — верх, 1 — низ).
  • setPin(element, options) — закрепление элемента, где options.spacerClass задаёт CSS-класс для spacer’а.

В приведённом примере spacer для закреплённого элемента будет иметь класс custom-spacer вместо стандартного scrollmagic-pin-spacer.

Практическое применение spacerClass

1. Кастомная стилизация spacer

Использование spacerClass позволяет добавлять свои CSS-свойства:

.custom-spacer {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px dashed #999;
}

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

2. Совместимость с фреймворками

При интеграции с CSS-фреймворками (Bootstrap, Tailwind) стандартный класс scrollmagic-pin-spacer может конфликтовать с глобальными стилями. Присвоение собственного класса через spacerClass помогает избежать нежелательных эффектов.

3. Несколько закреплённых элементов

Если на странице несколько pinned-элементов, для каждого можно задать свой spacerClass:

scene1.setPin("#header", { spacerClass: "header-spacer" });
scene2.setPin("#sidebar", { spacerClass: "sidebar-spacer" });

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

Важные моменты работы spacerClass

  1. Только для закреплённых элементов — свойство работает только вместе с .setPin().
  2. DOM-структура — ScrollMagic вставляет spacer автоматически в DOM перед или после закреплённого элемента, в зависимости от настроек.
  3. Не влияет на поведение сцены — класс влияет исключительно на стилизацию spacer, но не изменяет логику прокрутки или активации сцены.
  4. Обновление сцены — если менять класс после создания сцены, требуется вызов .update() для корректного применения.
scene.setPin("#pinElement", { spacerClass: "new-spacer" });
scene.update();

Отладка и визуализация

Для анализа работы закреплённых элементов и spacer’ов удобно использовать временные стили:

.debug-spacer {
    outline: 2px solid red;
    background: rgba(255, 0, 0, 0.1);
}

Применяя spacerClass: "debug-spacer", можно видеть точное положение spacer в реальном времени.

Заключение по spacerClass в ScrollMagic

Свойство spacerClass обеспечивает гибкий контроль над вспомогательным DOM-элементом, создаваемым при закреплении. Оно полезно для:

  • кастомной визуализации spacer’ов;
  • интеграции с CSS-фреймворками;
  • индивидуальной стилизации нескольких закреплённых элементов;
  • упрощённой отладки поведения сцен.

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

Оглавление