Определение направления

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

Controller отслеживает скролл страницы и уведомляет сцены о текущем положении, позволяя активировать анимации или изменения состояния элементов.

var controller = new ScrollMagic.Controller();

Создание контроллера — обязательный шаг, так как без него сцены не будут работать.

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

Сцена определяется через объект ScrollMagic.Scene с набором опций:

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

Пример:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    triggerHook: 0.5,
    duration: 200
})
.setClassToggle("#animate", "active")
.addTo(controller);

В этом примере при прокрутке страницы элемент с id #animate получит класс active, когда середина окна достигнет верхней границы #section1, а эффект сохранится на протяжении 200px прокрутки.

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

ScrollMagic позволяет отслеживать направление прокрутки через событие update, которое срабатывает при каждом изменении позиции скролла.

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

Значение e.scrollDirection может быть:

  • "FORWARD" — пользователь прокручивает вниз.
  • "REVERSE" — пользователь прокручивает вверх.

Это позволяет динамически менять поведение анимаций в зависимости от направления скролла. Например, можно запускать одни анимации при движении вниз и другие — при движении вверх.

Связывание анимаций с направлением

Для сложных эффектов часто используется связка ScrollMagic с GSAP:

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 400
})
.on("update", function(e) {
    if(e.scrollDirection === "FORWARD") {
        tween.play();
    } else {
        tween.reverse();
    }
})
.addTo(controller);

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

Расширенные возможности определения направления

  • Кратковременные изменения направления: можно использовать дополнительную логику для ускорения или замедления анимации при резком изменении направления.
  • Комбинированные триггеры: несколько сцен могут реагировать на одно и то же событие, но с разными действиями в зависимости от направления.
  • События входа и выхода сцены: enter и leave помогают определить не только момент начала сцены, но и момент её завершения, что позволяет более точно синхронизировать анимации с прокруткой.
scene.on("enter", function(e) {
    if(e.scrollDirection === "FORWARD") {
        console.log("Вход вниз");
    } else {
        console.log("Вход вверх");
    }
});

scene.on("leave", function(e) {
    if(e.scrollDirection === "FORWARD") {
        console.log("Выход вниз");
    } else {
        console.log("Выход вверх");
    }
});

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

  1. Использовать контроллеры с параметром vertical: true для стандартного вертикального скролла и vertical: false для горизонтального.
  2. Минимизировать количество сцены с большим количеством событий — слишком много обработчиков update может замедлять работу страницы.
  3. Комбинировать duration и triggerHook для точного позиционирования анимаций и контроля их длительности.
  4. Разделять анимации по направлениям: для сложных интерфейсов удобно создавать отдельные сцены для скролла вниз и вверх, чтобы не перегружать логику внутри одного события.

Заключение по использованию направления

Определение направления прокрутки является ядром интерактивных скролл-анимаций в ScrollMagic. Оно позволяет создавать динамичные эффекты, которые реагируют на поведение пользователя, повышая вовлечённость и гибкость интерфейса. Правильное использование scrollDirection в связке с update, enter и leave открывает возможности точного управления анимациями и динамической адаптации интерфейса к действиям пользователя.

Оглавление