Фиксированная длительность

В ScrollMagic фикcированная длительность (duration) сцены определяет, на каком участке прокрутки будет активен эффект или анимация. Этот параметр критически важен для точного контроля поведения элементов при скролле. Длительность может задаваться в пикселях или в процентах от высоты окна просмотра.

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 500 // длительность сцены в пикселях
})
.setTween("#animate", 1, {opacity: 0})
.addTo(controller);

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

Настройка длительности

1. Фиксированная числовая величина

Длительность сцены может быть задана как число пикселей:

duration: 300

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

2. Процент от высоты окна

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

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

Сцена автоматически пересчитывается при изменении размеров окна, что важно для адаптивных сайтов.

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

triggerElement определяет точку начала сцены. Если длительность фиксирована, то активная область сцены протянется вниз от точки триггера на величину duration.

var scene = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 400
});
  • При прокрутке до triggerElement сцена активируется.
  • Эффект или анимация будет выполняться до достижения конца зоны triggerElement + duration.

Фиксированная длительность и анимации Tween

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

var tween = gsap.to("#box", {x: 500, rotation: 360});
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 600
})
.setTween(tween)
.addTo(controller);
  • Анимация будет синхронизирована с прокруткой.
  • При использовании фиксированной длительности можно точно контролировать скорость анимации относительно прокрутки.

Стратегии выбора длительности

  1. Короткие сцены — подходят для быстрого появления или исчезновения элементов, например, fade-in или slide.
  2. Длинные сцены — используют для сложных анимаций, растянутых по прокрутке (parallax, движение фона, масштабирование).
  3. Процентные значения — предпочтительны для адаптивных интерфейсов, когда размеры элементов зависят от окна браузера.

Комбинация с Pinning

Фиксированная длительность часто используется совместно с pin:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section3",
    duration: 800
})
.setPin("#section3")
.addTo(controller);
  • Элемент фиксируется на экране на протяжении всей сцены.
  • Pinning позволяет создавать эффект «прилипшего» блока, который удерживается при скролле в течение заданной длины.

Особенности при динамическом контенте

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

scene.duration(document.querySelector("#section4").offsetHeight);

Это позволяет синхронизировать сцену с текущими размерами элементов и корректно отображать анимацию при любых изменениях DOM.

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

  • Не задавать слишком большие значения пикселей для длительности — сцена будет обрабатываться на протяжении всего участка прокрутки, что может влиять на производительность.
  • Использовать процентные значения или функции, чтобы сцена адаптировалась под экран пользователя.
  • Комбинировать с requestAnimationFrame внутри GSAP, чтобы анимации были максимально плавными.

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

Оглавление