Клавиатурное управление

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

Подключение библиотеки и базовая сцена

Для начала требуется подключить ScrollMagic и инициализировать контроллер:

const controller = new ScrollMagic.Controller();

Создание сцены выглядит следующим образом:

const scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 500
})
.setTween("#animateElement", { x: 300 })
.addTo(controller);

На этом этапе сцена реагирует на прокрутку. Для управления с клавиатуры необходимо отслеживать события нажатия клавиш и программно управлять прокруткой.

Отслеживание клавиш и программная прокрутка

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

document.addEventListener("keydown", function(event) {
    switch(event.code) {
        case "ArrowDown":
            window.scrollBy({ top: 100, beh * avior: "smooth" });
            break;
        case "ArrowUp":
            window.scrollBy({ top: -100, beh * avior: "smooth" });
            break;
    }
});
  • ArrowDown и ArrowUp управляют вертикальной прокруткой.
  • scrollBy с параметром beh * avior: "smooth" обеспечивает плавное движение.
  • Можно масштабировать top для ускорения или замедления скролла.

Привязка клавиш к сценам ScrollMagic

Чтобы сцены реагировали на конкретные клавиши, необходимо управлять позициями контроллера:

function scrollToScene(scene) {
    const scrollPos = scene.scrollOffset();
    window.scrollTo({ top: scrollPos, beh * avior: "smooth" });
}

Пример привязки к клавишам:

document.addEventListener("keydown", function(event) {
    if(event.code === "KeyN") { // переход к следующей сцене
        const nextScene = scenes[currentIndex + 1];
        if(nextScene) scrollToScene(nextScene);
    }
    if(event.code === "KeyP") { // переход к предыдущей сцене
        const prevScene = scenes[currentIndex - 1];
        if(prevScene) scrollToScene(prevScene);
    }
});

Здесь используется массив scenes и индекс текущей сцены currentIndex, что позволяет реализовать навигацию между несколькими секциями.

Управление анимацией через клавиши

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

document.addEventListener("keydown", function(event) {
    if(event.code === "Space") {
        tween.play();
    }
    if(event.code === "KeyS") {
        tween.reverse();
    }
});
  • tween.play() запускает анимацию вперед.
  • tween.reverse() запускает анимацию в обратную сторону.
  • Можно использовать .pause(), .restart() и .seek() для тонкой настройки.

Управление продолжительностью сцены с клавиатуры

В ScrollMagic сцена может иметь динамическую длину (duration), которую можно менять на лету:

scene.duration(function() {
    return window.innerHeight * 2; // длина сцены зависит от высоты окна
});

Клавиатурное управление может модифицировать эту длину:

document.addEventListener("keydown", function(event) {
    if(event.code === "ArrowRight") {
        scene.duration(scene.duration() + 100);
    }
    if(event.code === "ArrowLeft") {
        scene.duration(Math.max(scene.duration() - 100, 0));
    }
});

Это позволяет интерактивно расширять или сокращать область действия сцены.

Совмещение с другими событиями

Клавиатурное управление легко комбинируется с другими событиями ScrollMagic:

scene.on("enter", function() {
    console.log("Сцена активирована");
});

scene.on("leave", function() {
    console.log("Сцена деактивирована");
});
  • Можно запускать анимации только по определённым клавишам в момент активации сцены.
  • Поддерживаются различные условия, например, проверка текущего состояния scene.state().

Практические советы

  1. Использовать масштабируемые шаги прокрутки (scrollBy) для точной настройки скорости.
  2. Хранить сцены в массиве для удобной навигации по индексам.
  3. Проверять границы массива при переключении сцен, чтобы избежать ошибок.
  4. Синхронизировать клавиатурное управление с текущей позицией ScrollMagic, чтобы анимации и прокрутка оставались плавными.
  5. Использовать GSAP-твин для более сложных эффектов, например, параллакса или анимации элементов по траектории.

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

Оглавление