Логирование событий

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

Типы событий в ScrollMagic

События можно разделить на несколько категорий:

  1. События сцены (Scene) Каждая сцена в ScrollMagic генерирует собственные события, такие как:

    • start — срабатывает, когда скролл достигает начала сцены.
    • end — срабатывает при достижении конца сцены.
    • enter — когда элемент входит в область видимости.
    • leave — когда элемент покидает область видимости.
    • progress — срабатывает при каждом изменении прогресса сцены (значение от 0 до 1).

  2. События контроллера (Controller) Контроллер управляет всеми сценами и может отслеживать глобальные изменения:

    • update — срабатывает при каждом обновлении положения скролла.
    • refresh — срабатывает при пересчёте размеров или положения сцены.

Методы подписки на события

ScrollMagic использует стандартный синтаксис .on(eventName, callback) для регистрации обработчиков:

var controller = new ScrollMagic.Controller();

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

scene.on("start", function(event) {
    console.log("Сцена началась:", event);
});

scene.on("end", function(event) {
    console.log("Сцена завершена:", event);
});

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

Особенности:

  • Аргумент event содержит объект с информацией о событии: type, progress, scrollDirection, target.
  • Можно использовать цепочку .on() для регистрации нескольких обработчиков на разные события одной сцены.

Логирование прогресса анимации

Прогресс сцены полезно логировать при разработке сложных анимаций, так как он показывает текущее состояние сцены в реальном времени:

scene.on("progress", function(event) {
    var progressPercent = (event.progress * 100).toFixed(2);
    console.log(`Прогресс: ${progressPercent}%`);
});

Для сложных интерфейсов часто используют отображение прогресса не в консоли, а в DOM:

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

Логирование входа и выхода из сцены

События enter и leave помогают точно понимать, когда пользователь достигает определённого участка страницы:

scene.on("enter", function(event) {
    console.log("Элемент вошёл в область видимости", event.target);
});

scene.on("leave", function(event) {
    console.log("Элемент покинул область видимости", event.target);
});

Можно использовать условные проверки направления скролла:

scene.on("enter leave", function(event) {
    if(event.scrollDirection === "FORWARD") {
        console.log("Скролл вниз");
    } else {
        console.log("Скролл вверх");
    }
});

Отладка нескольких сцен

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

var scene1 = new ScrollMagic.Scene({ triggerElement: "#section1" }).addTo(controller);
var scene2 = new ScrollMagic.Scene({ triggerElement: "#section2" }).addTo(controller);

scene1.on("start end", function(e) {
    console.log("[Scene 1] Event:", e.type);
});

scene2.on("start end", function(e) {
    console.log("[Scene 2] Event:", e.type);
});

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

Использование событий контроллера для глобального логирования

Контроллер позволяет отслеживать скролл глобально:

controller.on("update", function(event) {
    console.log("Текущий скролл:", event.scrollPos);
});

controller.on("refresh", function() {
    console.log("Контроллер пересчитал размеры сцен");
});

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

Практические рекомендации

  • Использовать события progress только при необходимости, так как они вызываются очень часто и могут замедлять работу при большом количестве сцен.
  • Добавлять идентификаторы сцен в логах для упрощённого анализа.
  • При отладке можно выводить объект события целиком, а для продакшена оставлять только ключевые параметры (progress, scrollDirection).
  • Для визуального мониторинга состояния сцены удобно использовать DOM-индикаторы прогресса, цвета и классы.

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

Оглавление