Реакция на скролл вверх и вниз

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

Определение направления скролла

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

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

Пояснение:

  • FORWARD — пользователь скроллит вниз.
  • REVERSE — пользователь скроллит вверх.
  • Событие update вызывается каждый раз при изменении положения скролла, что позволяет непрерывно отслеживать направление движения.

Настройка сцены с триггером

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 200 // длина эффекта в пикселях
})
.addTo(controller);

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

  • triggerElement — элемент, при достижении которого сцена активируется.
  • duration — область действия сцены; если указано 0, событие срабатывает мгновенно при пересечении триггера.
  • addTo(controller) — добавление сцены в контроллер ScrollMagic, который управляет всеми сценами на странице.

Применение классов и анимаций в зависимости от направления

Можно динамически менять класс элемента или запускать анимацию при скролле вверх или вниз:

scene.on("update", function(event) {
    var box = document.querySelector("#box");
    if (event.scrollDirection === "FORWARD") {
        box.classList.add("scroll-down");
        box.classList.remove("scroll-up");
    } else if (event.scrollDirection === "REVERSE") {
        box.classList.add("scroll-up");
        box.classList.remove("scroll-down");
    }
});

Рекомендации по использованию:

  • Создание отдельных классов для каждого направления упрощает управление стилями и анимациями через CSS.
  • Избегать тяжелых вычислений внутри события update, так как оно вызывается при каждом пикселе скролла.

Использование событий enter и leave

Кроме update, сцена поддерживает события enter и leave, которые срабатывают при входе или выходе элемента из области сцролла:

scene.on("enter leave", function(event) {
    if (event.type === "enter") {
        console.log("Элемент вошёл в видимую область");
    } else if (event.type === "leave") {
        console.log("Элемент покинул видимую область");
    }
});

Эти события удобно сочетать с направлением скролла:

scene.on("enter", function(event) {
    if (event.scrollDirection === "FORWARD") {
        // Запустить анимацию появления при скролле вниз
    }
});

scene.on("leave", function(event) {
    if (event.scrollDirection === "REVERSE") {
        // Запустить анимацию возврата при скролле вверх
    }
});

Динамическое управление анимацией с GSAP

ScrollMagic идеально интегрируется с библиотекой GSAP. Направление скролла можно использовать для управления прогрессом анимации:

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

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

scene.on("update", function(event) {
    if (event.scrollDirection === "FORWARD") {
        tween.progress(1); // скролл вниз — завершить анимацию
    } else if (event.scrollDirection === "REVERSE") {
        tween.progress(0); // скролл вверх — вернуть в исходное состояние
    }
});

Преимущества:

  • Позволяет создавать обратимые анимации, которые реагируют на скролл в обе стороны.
  • Интеграция с GSAP обеспечивает плавность и контроль над состоянием анимации.

Сочетание нескольких сцен для разных направлений

Можно создавать отдельные сцены для отслеживания скролла вверх и вниз, что упрощает управление сложными эффектами:

var sceneDown = new ScrollMagic.Scene({ triggerElement: "#section2" })
    .on("enter", function(){ console.log("Скролл вниз активен"); })
    .addTo(controller);

var sceneUp = new ScrollMagic.Scene({ triggerElement: "#section2" })
    .on("leave", function(){ console.log("Скролл вверх активен"); })
    .addTo(controller);

Советы по организации:

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

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

  • Использовать событие update только для обновления состояния элементов или классов; сложные вычисления лучше выполнять заранее.
  • Комбинировать enter и leave с scrollDirection для точного контроля над визуальными эффектами.
  • Для больших проектов создавать отдельные сцены для каждой секции и каждого направления скролла.
  • Объединять ScrollMagic с GSAP или CSS-анимациями для плавных и обратимых эффектов.
Оглавление