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

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

Свойство duration

Свойство duration определяет длину сцены в пикселях или в процентах относительно высоты окна браузера. Например:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, от которого начинается сцена
    duration: 300 // длина сцены в пикселях
});

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

  • duration: 0 – сцена активируется мгновенно, как «точка» без растяжения.
  • duration: "100%" – сцена растягивается на 100% высоты окна браузера.
  • При динамическом контенте можно использовать функции для вычисления длительности:
duration: function () {
    return document.querySelector("#content").offsetHeight;
}

Это особенно полезно для адаптивных интерфейсов.

Визуальные индикаторы длины сцены

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

scene.addIndicators({
    name: "example",
    colorStart: "#FF0000",
    colorEnd: "#00FF00",
    indent: 10
});

Принципы работы индикаторов:

  • Верхняя граница индикатора соответствует triggerHook – месту активации сцены.
  • Нижняя граница – конец сцены, определяется duration.
  • Индикаторы помогают точно видеть, где начинается и заканчивается эффект.

Триггер и длительность: синергия

Сцена активируется, когда triggerElement пересекает линию, заданную triggerHook. Важно понимать влияние длительности на анимацию:

  • Короткая длительность – эффект происходит быстро, почти мгновенно.
  • Длинная длительность – анимация растягивается на весь промежуток прокрутки, создавая эффект плавного движения.

Пример плавной анимации с длительностью сцены:

var tween = TweenMax.to("#animate", 1, { x: 500, rotation: 360 });

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

Здесь анимация tween будет прогрессировать пропорционально прокрутке в течение 500 пикселей.

Процентная длительность

Для адаптивных интерфейсов удобна запись длительности в процентах:

duration: "50%" // половина высоты окна браузера
  • Преимущество: сцена автоматически подстраивается под размеры окна.
  • Ограничение: процент считается от текущей высоты окна, а не от высоты документа.

Влияние динамического контента

Когда контент страницы загружается асинхронно, длительность сцены может меняться. ScrollMagic позволяет обновлять сцену после загрузки элементов:

scene.duration(function () {
    return document.querySelector("#dynamic-content").offsetHeight;
});
  • Функция возвращает актуальную высоту контента.
  • Сцена автоматически пересчитывает свои границы при вызове scene.refresh().

Продвинутые техники: фиксированные элементы и «pin»

Свойство pin позволяет закреплять элемент на время действия сцены. При этом длительность сцены определяет, сколько прокрутки элемент будет оставаться закреплённым:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 600
})
.setPin("#pinned-element")
.addTo(controller);
  • Элемент остаётся фиксированным на экране до конца сцены.
  • Использование duration в пикселях или процентах позволяет синхронизировать pin с анимацией или визуальными эффектами.

Динамическая визуализация прогресса

Для сложных интерфейсов можно использовать событие progress сцены:

scene.on("progress", function (event) {
    document.querySelector("#progress-bar").style.width = (event.progress * 100) + "%";
});
  • event.progress – значение от 0 до 1, отражающее текущую позицию прокрутки внутри сцены.
  • Позволяет создавать интерактивные прогресс-бары, анимации прокрутки текста, графики и переходы между секциями.

Связь с библиотеками анимаций

ScrollMagic идеально интегрируется с библиотеками анимации:

  • GSAP / TweenMax – анимация по прокрутке с контролем длительности.
  • Velocity.js – анимации с плавным изменением свойств элементов.
  • CSS-анимации – триггеринг анимаций на определённой длине сцены.

Пример комбинирования TweenMax с динамической длительностью:

var tween = TweenMax.to("#box", 1, { scale: 2, rotation: 180 });

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: function () {
        return document.querySelector("#content").offsetHeight;
    }
})
.setTween(tween)
.addTo(controller);
  • Анимация масштабирования и вращения растягивается пропорционально реальной длине контента.
  • Обеспечивает точную синхронизацию визуальных эффектов и прокрутки.
Оглавление