Отслеживание прогресса сцены

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

Создание сцены

Для создания сцены используется конструктор ScrollMagic.Scene, принимающий объект с настройками:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при достижении которого сцена активируется
    duration: 500,              // длина сцены в пикселях
    offset: 100                 // смещение относительно триггер-элемента
});
  • triggerElement — HTML-элемент, относительно которого отслеживается прокрутка.
  • duration — расстояние в пикселях, на протяжении которого сцена активна. Если указано 0, сцена считается мгновенной.
  • offset — смещение от верхней границы окна просмотра для точной настройки момента активации.

Подключение к контроллеру

Сцена не работает самостоятельно. Она должна быть добавлена в контроллер (Controller):

var controller = new ScrollMagic.Controller();
scene.addTo(controller);

Контроллер следит за позицией скролла и управляет всеми сценами, связанными с ним.

События сцены и отслеживание прогресса

Основной метод для отслеживания прогресса сцены — это событие progress. Оно срабатывает каждый раз при изменении позиции скролла в пределах сцены и передает значение прогресса от 0 до 1.

scene.on("progress", function(event) {
    console.log("Прогресс сцены: ", event.progress);
});

  • event.progress — дробное значение, показывающее, какая часть сцены пройдена:

    • 0 — сцена ещё не достигнута.
    • 0.5 — прокручена половина сцены.
    • 1 — сцена завершена.

Использование этого события позволяет плавно управлять анимациями и другими эффектами, синхронизированными с прокруткой.

Визуальное отображение прогресса

Для динамической визуализации прогресса можно применять CSS-свойства, связанные с процентным заполнением:

var progressBar = document.querySelector(".progress-bar");

scene.on("progress", function(event) {
    progressBar.style.width = (event.progress * 100) + "%";
});

Таким образом, прогресс сцены напрямую контролирует ширину полосы загрузки или любые другие визуальные элементы.

Взаимодействие с анимациями

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

var tween = gsap.to("#box", {x: 500, duration: 1});

scene.setTween(tween);

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

scene.on("progress", function(event) {
    tween.progress(event.progress).pause();
});

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

Дополнительные события

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

  • enter — срабатывает, когда верхняя граница сцены пересекает триггер-элемент.
  • leave — срабатывает, когда сцена полностью покинута.
  • start — аналог события enter для мгновенных сцен.
  • end — аналог события leave для мгновенных сцен.

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

scene.on("enter leave", function(event) {
    if(event.type === "enter") {
        console.log("Сцена активирована");
    } else {
        console.log("Сцена завершена");
    }
});

Настройка точности прогресса

Для контроля над вычислением прогресса можно использовать метод setTween с параметром scrub. Scrub обеспечивает плавную синхронизацию анимации с прокруткой:

scene.setTween(tween, {scrub: true});
  • scrub: true — анимация строго следует за скроллом, прогресс сцены напрямую управляет состоянием анимации.
  • Можно также передать число в секундах, чтобы добавить задержку и смягчить движение.

Динамическое изменение сцены

ScrollMagic позволяет менять свойства сцены во время работы:

scene.duration(800);       // изменить длительность
scene.offset(50);          // изменить смещение
scene.triggerElement("#newTrigger"); // изменить триггер

Это полезно для адаптивных интерфейсов, где размеры элементов и прокрутка могут меняться в зависимости от устройства.

Вывод прогресса для сложных эффектов

При сочетании нескольких сцен или при параллакс-эффектах можно отслеживать прогресс каждой сцены и использовать его для управления разными слоями:

scenes.forEach(function(scene, index) {
    scene.on("progress", function(event) {
        layers[index].style.transform = `translateY(${event.progress * 100}px)`;
    });
});

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

Отслеживание прогресса сцены в ScrollMagic является фундаментом для создания интерактивных и динамичных веб-интерфейсов. Использование событий progress, enter и leave вместе с интеграцией GSAP и scrub обеспечивает полный контроль над визуальными эффектами, обеспечивая плавность и точность анимации.

Оглавление