pushFollowers

ScrollMagic — это JavaScript-библиотека, предназначенная для управления анимациями и событиями в зависимости от прокрутки страницы. Базовый принцип работы строится вокруг сцен (Scenes) и контроллеров (Controllers).

Контроллер (Controller)

Контроллер управляет всеми сценами на странице и отслеживает позицию скролла. Создается с помощью конструктора:

var controller = new ScrollMagic.Controller();

Контроллер может принимать параметры:

  • container — элемент, который отслеживает прокрутку вместо window.
  • vertical — направление прокрутки (true по умолчанию, вертикальное).
  • globalSceneOptions — объект с параметрами, применяемыми ко всем сценам по умолчанию.

Пример использования глобальных настроек:

var controller = new ScrollMagic.Controller({
    globalSceneOptions: { triggerHook: 0.5 }
});

Сцена (Scene)

Сцена — это основной блок, который привязывается к определенному элементу или позиции скролла. Сцена создается так:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 200,
    offset: 50,
    triggerHook: 0.9
});

Параметры сцены:

  • triggerElement — элемент, при появлении которого на экране запускается сцена.
  • duration — длина сцены в пикселях или в процентах. Если не задано, считается мгновенной.
  • offset — смещение относительно начала триггера.
  • triggerHook — точка на экране, где срабатывает триггер (от 0.0 верх до 1.0 низ).

Анимации с Tween

ScrollMagic интегрируется с GSAP (GreenSock Animation Platform) для создания плавных анимаций.

var tween = gsap.to("#box", {x: 400, rotation: 360, duration: 2});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger"
})
.setTween(tween)
.addTo(controller);

Ключевые методы сцены для анимаций:

  • .setTween() — связывает анимацию с прокруткой.
  • .reverse() — управляет воспроизведением анимации при прокрутке назад.
  • .setPin() — фиксирует элемент на экране на время сцены.

Фиксация элементов (Pinning)

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

scene.setPin("#pinElement");

Дополнительно можно задать опцию pushFollowers:

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

Описание pushFollowers:

  • true (по умолчанию) — элементы, следующие за закрепленным, сдвигаются вниз, освобождая место для pinned-элемента.
  • false — последующие элементы не сдвигаются, элемент накладывается поверх контента.

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

События сцены

ScrollMagic сцена поддерживает множество событий, которые можно использовать для запуска функций:

  • start — сцена активирована.
  • end — сцена завершена.
  • enter — скролл входит в область сцены.
  • leave — скролл покидает область сцены.
  • progress — прогресс сцены (от 0 до 1).

Пример использования событий:

scene.on("enter", function (event) {
    console.log("Элемент вошел в зону сцены");
});

Последовательности и Timeline

Для сложных анимаций удобно использовать Timeline из GSAP:

var timeline = gsap.timeline();
timeline
  .to("#box", {x: 300, duration: 1})
  .to("#box", {y: 200, duration: 1})
  .to("#box", {rotation: 180, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 600
})
.setTween(timeline)
.addTo(controller);

Timeline позволяет объединять несколько анимаций в одну сцену и контролировать их прогресс через скролл.

Оптимизация производительности

  • Использовать will-change и transform в CSS для GPU-ускоренных анимаций.
  • Минимизировать количество закрепленных элементов одновременно.
  • Ограничивать обработку событий progress до необходимых действий.

Интеграция с другими библиотеками

ScrollMagic легко комбинируется с:

  • GSAP — для всех видов анимаций.
  • jQuery — для удобного выбора элементов и событий.
  • Three.js — для скролл-триггеров в 3D-сценах.

Практические советы по pushFollowers

  • При pushFollowers: true элементы страницы двигаются естественно, но может возникнуть “скачок” в верстке.
  • При pushFollowers: false создается эффект наложения, полезный для sticky-баннеров и параллакса.
  • Использовать pushFollowers: false нужно аккуратно с динамическим контентом, чтобы не перекрывать важные элементы.

Пример комплексного использования

var controller = new ScrollMagic.Controller();

var tween = gsap.to("#header", {y: 100, opacity: 0, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#start",
    duration: 400,
    triggerHook: 0
})
.setTween(tween)
.setPin("#header", {pushFollowers: false})
.on("enter", function(){ console.log("Начало анимации"); })
.addTo(controller);

В этом примере заголовок фиксируется на экране, последующие блоки не сдвигаются, а анимация плавно исчезает при скролле.

Оглавление