Базовые параметры конфигурации

Для начала работы с библиотекой fullPage.js необходимо подключить её CSS и JS файлы в проекте. После этого создаётся контейнер с классом или идентификатором, в котором будут располагаться все секции. Инициализация выполняется вызовом метода new fullpage(), в который передаётся селектор контейнера и объект конфигурации.

Пример базовой инициализации:

new fullpage('#fullpage', {
    // конфигурация
});

Контейнер #fullpage должен содержать дочерние элементы с классом .section, каждая из которых будет отдельным экраном.

Основные параметры конфигурации

autoScrolling

Описание: Включает автоматическую прокрутку страниц. При значении true скролл осуществляется по секциям, а не стандартным способом. Тип: boolean Пример:

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

При autoScrolling: false скролл страницы ведётся стандартным образом браузера, и навигация по секциям происходит через якоря.

scrollHorizontally

Описание: Позволяет включить горизонтальную прокрутку внутри секции. Требует подключения расширения fullPage.js scrollHorizontally. Тип: boolean Пример:

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

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

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

Дополнительно можно настроить цвет и положение навигационных точек с помощью параметров navigationPosition и navigationTooltips.

anchors

Описание: Устанавливает якоря для секций, которые будут отображаться в URL. Позволяет переходить к конкретной секции через ссылку. Тип: array Пример:

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

С помощью якорей можно интегрировать fullPage.js с навигацией по сайту и использовать window.location.hash для перехода к нужной секции.

sectionsColor

Описание: Позволяет задавать индивидуальный цвет фона для каждой секции. Тип: array Пример:

new fullpage('#fullpage', {
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE']
});

Каждый элемент массива соответствует секции по порядку, начиная с первой.

scrollOverflow

Описание: Управляет появлением внутреннего скролла в секциях, если контент превышает высоту окна. Тип: boolean Пример:

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

Для работы этой опции необходимо подключить скрипт scrolloverflow.min.js. Она особенно полезна для длинных текстовых или медиа-блоков внутри секций.

fitToSection

Описание: Автоматически подгоняет скролл к ближайшей секции после прокрутки. Тип: boolean Пример:

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

При значении false пользователь может остановить скролл между секциями, создавая эффект плавного прокручивания без “прилипания” к секциям.

keyboardScrolling

Описание: Включает навигацию по секциям с помощью клавиш клавиатуры (стрелки вверх/вниз, Page Up/Page Down). Тип: boolean Пример:

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

Можно комбинировать с animateAnchor: true для плавного перехода к секции при изменении якоря через клавиатуру.

anchors и menu

Параметр menu позволяет связать элементы меню с секциями по якорям. Каждому пункту меню можно задать href="#anchor", чтобы при клике происходил переход к соответствующей секции.

new fullpage('#fullpage', {
    menu: '#myMenu',
    anchors: ['home', 'about', 'services', 'contact']
});

В этом случае пункты меню автоматически синхронизируются с текущей активной секцией.

controlArrows и verticalCentered

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

new fullpage('#fullpage', {
    controlArrows: true,
    verticalCentered: false
});

verticalCentered: false полезно при использовании кастомного позиционирования элементов внутри секций.

Параметры анимации

  • scrollingSpeed – скорость прокрутки между секциями в миллисекундах.
  • easing – функция анимации прокрутки (easeInOutCubic, linear и др.).
  • easingcss3 – функция CSS-анимации при css3: true.
new fullpage('#fullpage', {
    scrollingSpeed: 700,
    easing: 'easeInOutCubic',
    easingcss3: 'cubic-bezier(0.86, 0, 0.07, 1)'
});

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

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

Оглавление