Установка расширений

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

1. Установка библиотеки fullPage.js

Через npm

Для современных проектов на Node.js предпочтительно использовать npm:

npm install fullpage.js

После установки доступно подключение через модули:

import fullpage from 'fullpage.js';
import 'fullpage.js/dist/fullpage.css';

Через CDN

Если проект статический или не использует сборщики:

2. Основные расширения fullPage.js

Существует несколько официальных расширений, которые значительно увеличивают функциональность:

  1. ScrollOverflow Позволяет делать прокрутку внутри секций с переполнением содержимого. Подключение через npm:

    npm install fullpage.js/vendors/scrolloverflow

    Пример инициализации:

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

  2. Navigation Dots и Tooltips Встроенные возможности, но их расширение позволяет кастомизировать точки навигации и подписи. Конфигурация:

    new fullpage('#fullpage', {
    navigation: true,
    navigationTooltips: ['Главная', 'О нас', 'Контакты'],
    showActiveTooltip: true
});

  3. Parallax Создает эффект параллакса при скролле. Для этого подключается расширение fullPage.js Parallax Extension. Подключение через npm или CDN, затем в конфиг:

    new fullpage('#fullpage', {
    parallax: true,
    parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'}
});

3. Подключение сторонних плагинов

a) npm-пакеты

Если расширение доступно как npm-пакет, подключение происходит стандартным способом:

npm install fullpage-scroll-ext
import 'fullpage-scroll-ext';

b) Подключение через локальные файлы

Некоторые расширения поставляются в виде .js и .css файлов. Их необходимо добавить в проект и подключить перед инициализацией fullPage.js:



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

4. Инициализация расширений

Все расширения подключаются через конфигурационный объект fullPage.js. Основные правила:

  • Расширения должны подключаться до вызова new fullpage().
  • Конфигурация задается через соответствующие свойства объекта: scrollOverflow, parallax, dragAndMove и т.д.
  • Некоторые расширения требуют дополнительных зависимостей (например, scrollOverflow использует библиотеку iscroll или overthrow).

Пример объединения нескольких расширений:

new fullpage('#fullpage', {
    navigation: true,
    scrollOverflow: true,
    parallax: true,
    parallaxOptions: {type: 'reveal', percentage: 50, property: 'translate'}
});

5. Загрузка расширений динамически

Для оптимизации производительности можно подгружать расширения по требованию:

import('fullpage.js/vendors/scrolloverflow').then(module => {
    new fullpage('#fullpage', {
        scrollOverflow: true
    });
});

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

6. Проверка корректности подключения

После подключения расширений важно убедиться, что они работают:

  1. Секция с переполнением скроллится корректно (scrollOverflow).
  2. Параллакс-эффект реагирует на движение.
  3. Навигационные точки отображаются и подсвечиваются при переходе между секциями.

Ошибки часто связаны с неправильным порядком подключения скриптов или отсутствием зависимостей.

Оглавление