Параметр duration

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

Типы значений duration

duration может принимать несколько типов значений:

  1. Числовое значение (px) Простейший вариант — указать конкретное количество пикселей:

    var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
});

    В этом случае сцена будет активной на протяжении 300 пикселей прокрутки после достижения триггера.

  2. Процентное значение от высоты окна (%) Можно задать относительную длину сцены, например, 50% от высоты видимой области:

    var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: "50%"
});

    Библиотека автоматически вычисляет пиксели, исходя из высоты окна браузера.

  3. Функция (function) Для динамических сцен duration можно вычислять программно в момент инициализации или при ресайзе:

    var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: function () {
        return document.querySelector("#content").offsetHeight;
    }
});

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

Влияние duration на события

duration напрямую влияет на события сцены:

  • enter — срабатывает в момент входа в сцену (в начале прокрутки триггера).

  • leave — срабатывает при выходе из сцены, после завершения duration.

  • progress — прогресс сцены вычисляется как доля пройденного пути от 0 до 1:

    scene.on("progress", function (event) {
    console.log(event.progress); // 0..1
});

    Значение progress зависит от duration: короткая сцена будет иметь быстро меняющийся прогресс, длинная — медленно.

Динамическая смена duration

ScrollMagic позволяет изменять duration после создания сцены, что полезно при адаптивном дизайне:

scene.duration(500); // установка новой длительности в пикселях
scene.duration("75%"); // установка новой длительности в процентах

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

scene.duration(function() {
    return window.innerHeight * 0.8;
});

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

duration тесно связан с параметром triggerHook — точкой на экране, где начинается сцена.

  • Если triggerHook = 0 (верх окна), сцена активируется сразу после достижения верха окна.
  • Если triggerHook = 1 (низ окна), сцена начнёт прогрессировать, когда триггер достигнет нижней границы экрана.

Протяжённость сцены (duration) определяет длительность эффекта, а triggerHook — начальную позицию эффекта на экране.

Использование duration для анимаций

duration является фундаментальным для интеграции ScrollMagic с GSAP или другими библиотеками анимаций:

var tween = gsap.to("#box", {x: 500, rotation: 360, ease: "linear"});
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400
})
.setTween(tween)
.addTo(controller);

Здесь duration: 400 означает, что анимация будет прогрессировать пропорционально прокрутке сцены на 400px. Если увеличить duration, анимация станет более плавной и растянется по времени прокрутки; если уменьшить — станет быстрее.

Практические советы по использованию duration

  • Для коротких анимаций (например, fade in/out) достаточно duration в 100–300px.
  • Для длинных скролл-эффектов на страницах с большим контентом лучше использовать проценты от высоты окна.
  • Функция в duration идеально подходит для адаптивных макетов, когда высота контента может меняться.
  • При использовании параллакса или последовательных анимаций корректно задавать duration так, чтобы эффекты не накладывались неожиданно.

Параметр duration — это не просто длина сцены, а инструмент точного контроля над тем, как и когда прокрутка запускает эффекты и как они распределяются во времени, что делает ScrollMagic мощным средством создания интерактивного скроллинга.

Оглавление