Бесконечная длительность

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

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

Создание бесконечной сцены

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

// Создание сцены без ограничений по длительности
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // Элемент, от которого начинается сцена
    triggerHook: 0,             // Положение триггера на экране (0 - верх)
    duration: Infinity          // Бесконечная длительность
})
.setClassToggle("#animate", "active") // Применение класса при активации
.addTo(controller);

Ключевые моменты:

  • triggerElement — элемент DOM, с которого начинается активация сцены.
  • triggerHook — определяет положение триггера на экране (0 — верх, 1 — низ, 0.5 — центр).
  • duration: Infinity — задаёт бесконечную длительность. Можно также динамически рассчитывать длину через функции или размеры документа.

Использование динамической длительности

Иногда необходимо, чтобы длительность сцены зависела от контента страницы или размеров окна. ScrollMagic поддерживает передачу функции в duration:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    duration: function() {
        return document.body.scrollHeight - window.innerHeight;
    }
})
.setPin("#section") // Фиксация элемента на весь скролл
.addTo(controller);

Пояснение:

  • Функция duration вычисляет длину сцены в пикселях на основе текущей высоты документа.
  • Использование динамического значения полезно для адаптивных макетов, когда длина контента может меняться.

Пины и бесконечная длительность

Бесконечная сцена часто комбинируется с setPin(). Это позволяет закрепить элемент на экране на протяжении всего скролла или на определённой длине. Пример с бесконечной фиксацией:

var scene = new ScrollMagic.Scene({
    triggerElement: "#header",
    duration: Infinity,
    triggerHook: 0
})
.setPin("#header")
.addTo(controller);

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

Особенности:

  • Pin работает только если сцена привязана к контроллеру.
  • Для бесконечного пина желательно использовать triggerHook: 0, чтобы элемент фиксировался в верхней части экрана.

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

Бесконечная сцена часто применяется совместно с анимациями GreenSock (GSAP) или CSS-анимациями. Для непрерывного эффекта можно использовать tween без ограничения времени:

var tween = gsap.to("#ball", {
    y: "100vh",
    ease: "linear",
    repeat: -1
});

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

Пояснения:

  • repeat: -1 в GSAP делает анимацию бесконечной.
  • ScrollMagic сцена управляет началом и завершением анимации в зависимости от положения скролла.
  • При бесконечной длительности setTween может управлять анимацией плавно на протяжении всего документа.

Комбинирование с triggerHook и offset

Даже для бесконечных сцен важно правильно настраивать положение триггера:

  • triggerHook: 0 — сцена активируется при попадании элемента в верхнюю часть окна.
  • triggerHook: 1 — активация при попадании элемента в нижнюю часть окна.
  • offset — позволяет сместить точку срабатывания относительно триггера, например:
var scene = new ScrollMagic.Scene({
    triggerElement: "#start",
    triggerHook: 0.5,
    offset: 100,
    duration: Infinity
})
.setClassToggle("#element", "highlight")
.addTo(controller);

Практические рекомендации

  1. Следить за производительностью: бесконечные сцены с анимациями могут нагружать браузер при сложных DOM-структурах.
  2. Комбинировать с pin и tween: позволяет создавать эффект «прилипших» элементов и бесконечно проигрываемых анимаций.
  3. Использовать динамическую длительность: особенно для адаптивных макетов и длинных страниц.
  4. Сегментировать сцены: при больших проектах лучше разбивать страницу на несколько бесконечных сцен, чтобы избежать конфликтов между анимациями.

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

Оглавление