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

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

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

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

В этом примере длительность сцены автоматически подстраивается под высоту блока, что особенно удобно при адаптивной верстке.

Использование функций для вычисления duration

Функция duration может возвращать любое числовое значение, что позволяет строить сложные зависимости:

duration: function() {
    var windowHeight = window.innerHeight;
    var contentHeight = document.querySelector("#section2").scrollHeight;
    return Math.max(contentHeight - windowHeight, 0);
}

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

Адаптация под изменения DOM

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

scene.duration(function() {
    return document.querySelector("#dynamicContent").offsetHeight;
});
scene.refresh();

Метод .refresh() заставляет ScrollMagic пересчитать все параметры сцены и обновить состояние контроллера. Это особенно полезно при загрузке изображений, ленивой подгрузке блоков или изменении текста.

Длительность с процентами и масштабируемость

Иногда удобнее задавать длительность в процентах от высоты окна:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section3",
    duration: window.innerHeight * 1.5
})
.setTween("#animatedElement", {x: 200})
.addTo(controller);

Такой способ делает анимацию масштабируемой, позволяя легко адаптировать её под разные разрешения экранов.

Комбинация с Pin и TweenMax

Динамическая длительность особенно эффективно работает с фиксацией элемента (setPin) и анимациями через GSAP (TweenMax/gsap):

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

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

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

Обработка событий при изменении длительности

ScrollMagic позволяет отслеживать активность сцены через события:

  • enter — когда сцена становится активной
  • leave — когда сцена перестает быть активной
  • progress — процент выполнения сцены

Используя динамическую длительность, событие progress может меняться в зависимости от реальной высоты контента:

scene.on("progress", function(event) {
    console.log("Прогресс сцены:", event.progress);
});

Это позволяет создавать адаптивные эффекты, например постепенное изменение прозрачности или смещения элементов.

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

  1. Избегать фиксированных пикселей, если контент динамический.
  2. Использовать функции для duration, чтобы сцена корректно масштабировалась.
  3. Обновлять сцену при изменении DOM через scene.refresh().
  4. Комбинировать с Pin и Tween, чтобы эффекты выглядели плавно на любых разрешениях.
  5. Следить за производительностью, особенно при большом количестве сцен с динамическими вычислениями.

Динамическая длительность в ScrollMagic позволяет создавать гибкие, адаптивные и интерактивные скролл-анимации, которые подстраиваются под любые условия страницы и размеры экрана.

Оглавление