Длительность относительно viewport

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

Принцип работы duration в ScrollMagic

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

  • В пикселях (число, например 300)
  • В процентах от высоты viewport (строка с %, например '50%')

Пример:

var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: '50%'
})
.setTween("#animate", {opacity: 1})
.addTo(controller);

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

Расчет пиксельного значения из процентов

ScrollMagic автоматически конвертирует процентное значение в пиксели, основываясь на текущей высоте viewport. Формула, применяемая внутри библиотеки:

duration_px = (percentage_value / 100) * window.innerHeight

Таким образом, duration: '100%' всегда будет соответствовать высоте видимой области, независимо от устройства или размера окна.

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

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

function updateDuration() {
  var newDuration = window.innerHeight * 0.75; // 75% viewport
  scene.duration(newDuration);
}

window.addEventListener('resize', updateDuration);

Это позволяет поддерживать согласованность анимации при адаптивном дизайне.

Влияние длительности на анимации

  1. Короткая длительность (<100% viewport)

    • Анимация выполняется быстро, сразу после появления триггера.
    • Подходит для эффектов «мигания» или кратких трансформаций.

  2. Средняя длительность (~100% viewport)

    • Анимация синхронизирована с прокруткой одного экрана.
    • Часто используется для появления элементов по мере скролла.

  3. Длинная длительность (>100% viewport)

    • Анимация растягивается на несколько экранов.
    • Хорошо подходит для параллакс-эффектов или длительных трансформаций.

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

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

var parallaxScene = new ScrollMagic.Scene({
  triggerElement: "#parallax-trigger",
  duration: '200%' // два экрана
})
.setTween("#background", {y: "50%", ease: Linear.easeNone})
.addTo(controller);

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

Анимация постепенного появления текста:

var fadeScene = new ScrollMagic.Scene({
  triggerElement: "#text-section",
  duration: '75%' // три четверти экрана
})
.setTween("#text-section p", {opacity: 1, y: 0, ease: Power1.easeInOut})
.addTo(controller);

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

Особенности при использовании процентов

  • Проценты всегда относятся к высоте окна браузера, а не к высоте документа или родительского блока.
  • Если сцена внутри контейнера с ограниченной высотой, рекомендуется использовать пиксели или дополнительные вычисления, чтобы корректно контролировать длительность.
  • Процентная длительность позволяет создавать эффекты одинаковой «скорости» прокрутки на разных устройствах, что важно для адаптивного дизайна.

Итоговые рекомендации

  • Использовать '100%' для эффекта на один экран.
  • Для параллакса или длинных анимаций применять >100% (например, '200%').
  • Для коротких всплывающих эффектов достаточно '<50%'.
  • Всегда учитывать динамическое обновление при изменении размеров окна через scene.duration() и события resize.

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

Оглавление