Прогресс-бары

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

Каждая сцена (Scene) имеет свойство progress, которое возвращает значение от 0 до 1. Этот диапазон можно использовать для управления шириной, высотой или степенью прозрачности элемента, создавая эффект динамического заполнения.

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

scene.on("progress", function(event) {
  var progressBar = document.querySelector("#progress-bar");
  progressBar.style.width = (event.progress * 100) + "%";
});

Здесь event.progress отражает процент прокрутки сцены. Значение автоматически обновляется при каждом скролле, позволяя синхронизировать анимацию с движением пользователя.

Настройка сцены для прогресс-бара

Прогресс-бар зависит от корректной настройки сцены. Ключевые параметры:

  • triggerElement – элемент, с которого начинается отслеживание.
  • duration – длина сцены, определяющая, на какой протяжённости скролла прогресс будет изменяться.
  • triggerHook – положение триггера относительно видимой области (0 – верх, 1 – низ).

Использование этих параметров позволяет гибко управлять точкой начала и завершения анимации прогресс-бара.

var scene = new ScrollMagic.Scene({
  triggerElement: "#content",
  duration: "80%", // сцена длится 80% высоты окна
  triggerHook: 0
})
.addTo(controller);

duration может задаваться как в пикселях, так и в процентах относительно высоты окна или элемента, что повышает адаптивность анимации.

Анимация прогресс-бара через TweenMax / GSAP

Для более плавных и контролируемых анимаций рекомендуется интеграция с библиотекой GSAP. Прогресс сцены можно напрямую связывать с TweenMax.to или gsap.to, создавая эффект «живого» заполнения.

var tween = gsap.to("#progress-bar", {width: "100%", ease: "linear"});

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

Использование ease: "linear" гарантирует равномерное изменение ширины без ускорений и замедлений, что идеально для прогресс-бара.

Интерактивные прогресс-бары с несколькими сценами

В случае нескольких сцен можно комбинировать несколько прогресс-баров или управлять одним общим элементом, суммируя прогресс:

var scenes = document.querySelectorAll(".section");
var progressBar = document.querySelector("#main-progress");

scenes.forEach(function(section) {
  var scene = new ScrollMagic.Scene({
    triggerElement: section,
    duration: section.offsetHeight
  })
  .on("progress", function(event) {
    var totalProgress = 0;
    scenes.forEach(function(sec) {
      var s = ScrollMagic.Scene({triggerElement: sec}).progress();
      totalProgress += s / scenes.length;
    });
    progressBar.style.width = (totalProgress * 100) + "%";
  })
  .addTo(controller);
});

Этот подход позволяет создавать глобальные индикаторы прогресса, отражающие скролл по всей странице или по определённой последовательности блоков.

Варианты визуального оформления

Прогресс-бары могут быть горизонтальными, вертикальными, круговыми или сложными SVG-анимациями. В ScrollMagic они реализуются через изменение CSS-свойств (width, height, stroke-dasharray) или с помощью GSAP-анимаций.

Пример вертикального прогресс-бара:

#progress-bar {
  width: 8px;
  height: 0;
  background: #3498db;
  position: fixed;
  top: 0;
  left: 0;
}
scene.on("progress", function(event) {
  progressBar.style.height = (event.progress * window.innerHeight) + "px";
});

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

Управление событиями сцены

Прогресс-бары часто сопровождаются событиями enter, leave и update. Например, можно изменять цвет прогресс-бара при достижении определённого этапа:

scene.on("update", function(event) {
  if(event.progress > 0.5) {
    progressBar.style.backgroundColor = "#e74c3c";
  } else {
    progressBar.style.backgroundColor = "#3498db";
  }
});

События сцены позволяют добавлять интерактивность, изменять стиль и поведение прогресс-бара в зависимости от положения пользователя на странице.

Интеграция с адаптивными макетами

Прогресс-бары легко адаптируются к мобильным устройствам, если использовать относительные величины (% или vh/vw) вместо фиксированных пикселей. Кроме того, ScrollMagic поддерживает динамическое обновление сцены при изменении размера окна:

window.addEventListener("resize", function() {
  controller.update(true); // обновление всех сцен
});

Это предотвращает рассинхронизацию прогресса при изменении размеров экрана, сохраняя корректное отображение анимации.

Комбинирование с параллакс-эффектами

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

var tween = gsap.to("#parallax-element", {y: -200, ease: "linear"});
var scene = new ScrollMagic.Scene({
  triggerElement: "#parallax-section",
  duration: 600
})
.setTween(tween)
.addTo(controller);

Прогресс сцены может одновременно управлять этим tween и прогресс-баром, обеспечивая единое визуальное взаимодействие.

Оглавление