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

FullPage.js предоставляет мощный инструмент для создания веб-страниц с эффектом «одна секция на весь экран». Одним из ключевых способов управления переходами между секциями является клавиатурная навигация. Она позволяет пользователю перемещаться по страницам с помощью стрелок, клавиши Page Up / Page Down и других горячих клавиш, повышая удобство взаимодействия и доступность интерфейса.

Включение и настройка клавиатурной навигации

Для активации клавиатурной навигации используется параметр keyboardScrolling при инициализации fullPage.js:

new fullpage('#fullpage', {
    keyboardScrolling: true,  // Включение клавиатурной навигации
    animateAnchor: true,      // Анимация при переходе к якорю через клавиатуру
    sectionSelector: '.section'
});

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

  • keyboardScrolling: true — разрешает прокрутку через клавиши.

  • Если значение false, клавиатурная навигация полностью отключена.

  • Этот параметр можно изменять динамически через API:

    fullpage_api.setKeyboardScrolling(false); // отключить
fullpage_api.setKeyboardScrolling(true);  // включить

Горячие клавиши по умолчанию

FullPage.js использует стандартные клавиши для навигации:

  • Стрелка вниз — переход к следующей секции.
  • Стрелка вверх — переход к предыдущей секции.
  • Page Down — переход к следующей секции.
  • Page Up — переход к предыдущей секции.
  • Home — переход к первой секции.
  • End — переход к последней секции.
  • Пробел (Space) — прокрутка вниз на одну секцию.

Клавиши работают автоматически, если keyboardScrolling включен. Для секций с горизонтальными слайдами также поддерживаются стрелки влево и вправо для переключения слайдов.

Ограничение навигации по секциям

FullPage.js позволяет ограничивать навигацию по клавиатуре для отдельных секций. Для этого можно использовать метод setKeyboardScrolling с параметром true или false в момент входа в секцию:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        if(destination.index === 2){ // 3-я секция (индексация с 0)
            fullpage_api.setKeyboardScrolling(false);
        } else {
            fullpage_api.setKeyboardScrolling(true);
        }
    }
});

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

Настройка прокрутки при горизонтальных слайдах

Для секций с горизонтальными слайдами клавиатурная навигация управляется стрелками влево/вправо. Для более точной настройки можно использовать событие afterSlideLoad:

new fullpage('#fullpage', {
    controlArrows: true,
    afterSlideLoad: function(section, origin, destination, direction){
        console.log('Слайд переключен с клавиатуры или мышью');
    }
});

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

  • Если горизонтальная навигация отключена (controlArrows: false), стрелки клавиатуры не будут переключать слайды.
  • При горизонтальных слайдах вертикальные клавиши по-прежнему управляют сменой секций.

Комбинация с якорями (anchors)

Клавиатурная навигация тесно интегрируется с якорями:

new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    keyboardScrolling: true
});

  • Клавиши Home и End автоматически переходят к секциям по якорям.

  • При использовании animateAnchor: true переход осуществляется плавно.

  • Переходы можно контролировать через API:

    fullpage_api.moveTo('thirdPage'); // переход к секции по якорю

Взаимодействие с другими событиями

Для создания гибкой клавиатурной навигации можно сочетать её с событиями fullPage.js:

  • onLeave — реагирует на уход с секции и может временно отключать клавиатуру.
  • afterLoad — позволяет включать или отключать клавиатуру динамически.
  • afterSlideLoad — управление слайдами через стрелки.

Пример динамического управления клавиатурой:

new fullpage('#fullpage', {
    keyboardScrolling: true,
    onLeave: function(origin, destination, direction){
        if(destination.index === 4){
            fullpage_api.setKeyboardScrolling(false);
        }
    },
    afterLoad: function(origin, destination, direction){
        if(destination.index !== 4){
            fullpage_api.setKeyboardScrolling(true);
        }
    }
});

Особенности доступности

Клавиатурная навигация повышает доступность сайта:

  • Пользователи с ограниченной мобильностью могут перемещаться без мыши.
  • FullPage.js корректно взаимодействует с экранными считывателями, если правильно настроены секции и слайды.
  • Важно не блокировать клавиатурную навигацию без явной причины, чтобы не нарушать UX.

Клавиатурная навигация в fullPage.js — это мощный инструмент, который позволяет строить интуитивные, плавные и доступные страницы с вертикальными и горизонтальными секциями. Комбинируя параметры keyboardScrolling, события API и якоря, можно создавать гибкое управление как для простых лендингов, так и для сложных интерактивных интерфейсов.

Оглавление