Навигация между секциями

FullPage.js предоставляет мощный инструмент для создания веб-страниц с полноэкранной прокруткой. Основная единица структуры — секция, которая занимает весь экран. Навигация между секциями является ключевой частью взаимодействия с пользователем и может быть реализована как автоматически при прокрутке, так и вручную через программный интерфейс библиотеки.

Подключение и инициализация

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

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    navigationPosition: 'right',
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
});

Ключевые параметры:

  • autoScrolling — включает автоматическую прокрутку на одну секцию за раз.
  • navigation — отображает навигационные точки справа.
  • navigationPosition — позиция точек ('right' или 'left').
  • anchors — уникальные идентификаторы секций, позволяющие ссылаться на них через URL (#firstPage).

Программное управление переходами

FullPage.js предоставляет методы для управления навигацией через Jav * aScript:

  1. Переход к секции по индексу или якорю:
fullpage_api.moveTo(2); // Перейти ко второй секции
fullpage_api.moveTo('thirdPage'); // Перейти к секции с якорем 'thirdPage'
  1. Пошаговое перемещение:
fullpage_api.moveSectionUp();   // Перейти к предыдущей секции
fullpage_api.moveSectionDown(); // Перейти к следующей секции
  1. Переход к слайдам внутри секции:

Если секция содержит горизонтальные слайды:

fullpage_api.moveSlideRight(); // Перейти к следующему слайду
fullpage_api.moveSlideLeft();  // Перейти к предыдущему слайду

Горячие клавиши и прокрутка

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

  • Стрелки вверх/вниз — перемещение между секциями.
  • Page Up / Page Down — аналогично стрелкам.
  • Home / End — переход к первой или последней секции.

Клавиши можно отключить или изменить через параметр keyboardScrolling:

new fullpage('#fullpage', {
    keyboardScrolling: true,
    animateAnchor: true
});

Навигация через URL

Использование якорей позволяет не только перемещаться по секциям программно, но и напрямую через URL:

<a href="#secondPage">Перейти ко второй секции</a>

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

animateAnchor: true

Привязка событий навигации

FullPage.js поддерживает множество событий, связанных с перемещением между секциями:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        console.log("Покидаем секцию " + origin.index);
    },
    afterLoad: function(origin, destination, direction){
        console.log("Загружена секция " + destination.index);
    }
});

Основные события:

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

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

Настройка навигационных элементов

FullPage.js позволяет кастомизировать навигацию:

  1. Точки навигации:
navigation: true,
navigationTooltips: ['Главная', 'О нас', 'Контакты'],
showActiveTooltip: true
  • navigationTooltips — всплывающие подсказки при наведении на точки.
  • showActiveTooltip — отображение подсказки для активной секции.
  1. Вертикальная и горизонтальная навигация:

Параметры scrollHorizontally и слайды внутри секций обеспечивают комбинированное перемещение как по вертикали, так и по горизонтали.

Автоматическое пролистывание и контроль скорости

Параметры, влияющие на скорость и плавность переходов:

new fullpage('#fullpage', {
    scrollingSpeed: 700, // скорость прокрутки в миллисекундах
    easing: 'easeInOutCubic', // функция плавности
    autoScrolling: true
});
  • scrollingSpeed задаёт длительность анимации между секциями.
  • easing позволяет выбрать кривую ускорения, влияющую на ощущение плавности.

Примеры продвинутых сценариев

  1. Программная прокрутка при событии:
document.querySelector('#nextBtn').addEventListener('click', () => {
    fullpage_api.moveSectionDown();
});
  1. Ограничение прокрутки по условию:
new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        if(destination.index === 2){
            return false; // Блокируем переход к третьей секции
        }
    }
});
  1. Динамическое переключение между секциями по якорю:
function goToSection(name){
    fullpage_api.moveTo(name);
}

goToSection('secondPage');

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

Оглавление