Клавиатурная навигация

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

Клавиатурная навигация в ScrollMagic строится на сочетании слушателей событий клавиатуры и управления сценами через контроллер.

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

const controller = new ScrollMagic.Controller();

const scene1 = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "100%"
}).setClassToggle("#section1", "active")
  .addTo(controller);

const scene2 = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: "100%"
}).setClassToggle("#section2", "active")
  .addTo(controller);

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

ScrollMagic.Controller() управляет всеми сценами на странице.
triggerElement задаёт DOM-элемент, при достижении которого сцена активируется.
duration может быть задан в пикселях или процентах от высоты окна.
setClassToggle позволяет менять состояние элемента (например, активный/неактивный).

Отслеживание клавиш

Для навигации используется событие keydown:

let currentSceneIndex = 0;
const scenes = [scene1, scene2];

document.addEventListener("keydown", function(e) {
    switch (e.key) {
        case "ArrowDown":
        case "PageDown":
            goToNextScene();
            break;
        case "ArrowUp":
        case "PageUp":
            goToPreviousScene();
            break;
    }
});

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

ArrowDown и PageDown перемещают вперёд.
ArrowUp и PageUp перемещают назад.
currentSceneIndex хранит текущую сцену для синхронизации.

Переключение между сценами

Функции перехода:

function goToNextScene() {
    if (currentSceneIndex < scenes.length - 1) {
        currentSceneIndex++;
        scrollToScene(currentSceneIndex);
    }
}

function goToPreviousScene() {
    if (currentSceneIndex > 0) {
        currentSceneIndex--;
        scrollToScene(currentSceneIndex);
    }
}

function scrollToScene(index) {
    const scene = scenes[index];
    const offset = scene.triggerElement().offsetTop;

    window.scrollTo({
        top: offset,
        beh * avior: "smooth"
    });
}

Важные моменты:

scene.triggerElement().offsetTop позволяет узнать вертикальное смещение сцены.
window.scrollTo({ beh * avior: "smooth" }) обеспечивает плавный скролл.
Управление индексом сцены предотвращает выход за пределы массива.

Обработка фокуса и интерактивных элементов

При наличии форм или кнопок важно не блокировать стандартное поведение клавиш. Можно добавить проверку:

document.addEventListener("keydown", function(e) {
    const activeTag = document.activeElement.tagName.toLowerCase();
    if (activeTag === "input" || activeTag === "textarea") return;

    switch (e.key) {
        case "ArrowDown":
        case "PageDown":
            goToNextScene();
            break;
        case "ArrowUp":
        case "PageUp":
            goToPreviousScene();
            break;
    }
});

Пояснение:

document.activeElement отслеживает текущий элемент с фокусом.
Если фокус находится на полях ввода, навигация клавишами не срабатывает, что предотвращает конфликт с вводом текста.

Интеграция с анимациями TweenMax / GSAP

Часто сцены ScrollMagic управляют анимациями через GSAP:

const tween = gsap.from("#section1 .box", {
    y: 100,
    opacity: 0,
    duration: 1
});

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

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

function scrollToScene(index) {
    const scene = scenes[index];
    const offset = scene.triggerElement().offsetTop;

    gsap.to(window, { scrollTo: offset, duration: 1 });
}

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

Использование gsap.to(window, { scrollTo }) позволяет плавно перемещать страницу и одновременно проигрывать сцены.
Анимации остаются синхронизированными с прокруткой даже при управлении клавишами.

Поддержка колёсика мыши и клавиатуры вместе

Можно объединять управление мышью и клавиатурой, сохраняя текущую сцену:

controller.scrollTo(function(target) {
    gsap.to(window, { scrollTo: target, duration: 1 });
});

Теперь вызов controller.scrollTo(scene.triggerElement()) можно использовать как для клика по кнопке, так и для клавиш ArrowDown / ArrowUp.