Использование с jQuery

Для использования fullPage.js с jQuery необходимо подключить саму библиотеку и стили. Обычно это делается через CDN или локальные файлы:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.27/fullpage.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.27/fullpage.min.js"></script>

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

<div id="fullpage">
    <div class="section">Секция 1</div>
    <div class="section">Секция 2</div>
    <div class="section">Секция 3</div>
</div>

Каждая .section представляет отдельный экран, между которыми будет происходить скроллинг.

Инициализация fullPage.js через jQuery

Инициализация выполняется с помощью метода fullpage():

$(document).ready(function() {
    $('#fullpage').fullpage({
        // Настройки
        autoScrolling: true,
        navigation: true,
        scrollBar: false,
        navigationPosition: 'right',
        anchors: ['firstPage', 'secondPage', 'thirdPage'],
        menu: '#menu'
    });
});

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

  • autoScrolling — включает автоматическую прокрутку между секциями.
  • navigation — отображение навигационных точек справа.
  • anchors — уникальные идентификаторы секций для ссылок и управления скроллом.
  • menu — позволяет связать навигацию с элементами меню.

Управление скроллингом и секциями

fullPage.js предоставляет методы для управления через jQuery:

// Переход на определённую секцию
$.fn.fullpage.moveTo('secondPage');

// Переход на следующую или предыдущую секцию
$.fn.fullpage.moveSectionDown();
$.fn.fullpage.moveSectionUp();

// Переход к определённому слайду внутри секции
$.fn.fullpage.moveSlideRight();
$.fn.fullpage.moveSlideLeft();

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

Работа с событиями

События в fullPage.js обрабатываются через jQuery, что удобно для кастомной логики:

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

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

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

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

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

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
    <div class="slide">Слайд 3</div>
</div>

Управление слайдами через jQuery:

$.fn.fullpage.moveSlideRight();
$.fn.fullpage.moveSlideLeft();

События для слайдов:

$('#fullpage').fullpage({
    afterSlideLoad: function(section, origin, destination, direction){
        console.log('Слайд загружен: ' + destination.index);
    },
    onSlideLeave: function(section, origin, destination, direction){
        console.log('Покидаем слайд: ' + origin.index);
    }
});

Интеграция с меню и якорями

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

<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage">Секция 1</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Секция 2</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Секция 3</a></li>
</ul>

Связь с библиотекой:

$('#fullpage').fullpage({
    menu: '#menu',
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    navigation: true
});

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

Адаптивность и скролл на мобильных устройствах

fullPage.js поддерживает адаптивность через настройку responsiveWidth и responsiveHeight:

$('#fullpage').fullpage({
    responsiveWidth: 900,
    responsiveHeight: 600
});

Если ширина окна меньше 900px или высота меньше 600px, fullPage.js отключает автоматический скроллинг, оставляя обычный браузерный скролл.

Динамическое добавление и удаление секций

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

// Добавление новой секции в конец
$.fn.fullpage.buildSection('<div class="section">Новая секция</div>');

// Удаление секции по индексу
$.fn.fullpage.destroy('all');

При динамических изменениях важно вызывать методы перерисовки (reBuild), чтобы fullPage.js корректно обновил размеры:

$.fn.fullpage.reBuild();

Кастомизация анимаций и эффектов

fullPage.js позволяет управлять анимацией при смене секций через CSS и дополнительные параметры:

$('#fullpage').fullpage({
    scrollingSpeed: 700, // Скорость прокрутки
    easing: 'easeInOutCubic', // Тип анимации
    css3: true, // Использовать CSS3 анимацию
});

Для сложных эффектов можно комбинировать события onLeave и afterLoad с анимацией через jQuery или CSS-классы.

Интеграция с внешними библиотеками

fullPage.js на jQuery хорошо сочетается с другими библиотеками, например:

  • Анимация через GSAP для сложных эффектов при смене секций.
  • Параллакс-эффекты через ScrollMagic.
  • Взаимодействие с формами, слайдерами и динамическим контентом.

Использование событий fullPage.js позволяет синхронизировать внешние скрипты с прокруткой, создавая интерактивные и отзывчивые интерфейсы.

Оглавление