Что такое fullPage.js

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

Секции задаются стандартными HTML-элементами, обычно <section> или <div>, которым присваивается CSS-класс, например section. Библиотека автоматически вычисляет высоту окна и управляет позицией прокрутки, обеспечивая плавный переход между секциями.

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

Инициализация библиотеки происходит через вызов метода new fullpage() с передачей селектора контейнера и объекта настроек:

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

Вертикальные и горизонтальные слайды

Каждая секция может содержать горизонтальные слайды, реализуемые с помощью элемента <div class="slide">. Это позволяет создавать карусельный эффект внутри одной секции, сохраняя основной вертикальный скролл.

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

Настройка горизонтальных слайдов выполняется через объект инициализации:

new fullpage('#fullpage', {
    controlArrows: true, // стрелки для навигации между слайдами
    loopHorizontal: false, // зацикливание горизонтальных слайдов
});

Навигация и индикаторы

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

  • Навигационные точки — вертикальные индикаторы справа (navigation: true).
  • Навигация по якорям — позволяет переходить к секции через URL с хэшем (anchors: ['first', 'second', 'third']).
  • Меню — можно связать с секциями через CSS-классы и идентификаторы.
new fullpage('#fullpage', {
    anchors: ['home', 'about', 'contact'],
    menu: '#myMenu',
});

Настройка скроллинга и адаптивность

Библиотека позволяет управлять поведением прокрутки:

  • fitToSection — плавно подгоняет страницу к следующей секции после завершения прокрутки.
  • scrollBar — включение стандартного браузерного скролла для более естественного поведения.
  • responsiveWidth и responsiveHeight — отключение автоматического скролла на устройствах с меньшей шириной или высотой.
new fullpage('#fullpage', {
    fitToSection: true,
    scrollBar: false,
    responsiveWidth: 900,
});

События и API

FullPage.js имеет развитый набор событий и методов для взаимодействия:

  • События:

    • onLeave(origin, destination, direction) — срабатывает при покидании секции.
    • afterLoad(origin, destination, direction) — вызывается после завершения загрузки секции.
    • afterSlideLoad(section, origin, destination, direction) — после перехода слайдов.

  • Методы:

    • fullpage_api.moveTo(section, slide) — переход к указанной секции или слайду.
    • fullpage_api.setAutoScrolling(boolean) — включение/отключение автоскролла.
    • fullpage_api.destroy('all') — полное уничтожение инстанса и возврат страницы к стандартному скроллу.

Пример использования события:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        console.log('Покидаем секцию', origin.index, 'Направление:', direction);
    }
});

Стилизация и анимация

Каждая секция и слайд могут иметь собственные CSS-классы для стилизации. Для плавных анимаций часто используют CSS-переходы и transform. FullPage.js поддерживает коллбэки для запуска анимаций при загрузке секции или слайда.

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    transition: background 0.5s;
}

.section.active {
    background-color: #3498db;
}

Поддержка мобильных устройств и сенсорных экранов

FullPage.js автоматически распознаёт сенсорные устройства и позволяет управлять свайпами. Для мобильных устройств можно отключать автоскролл и использовать обычный скролл через настройки responsiveWidth и responsiveHeight.

new fullpage('#fullpage', {
    responsiveWidth: 768,
    responsiveHeight: 600,
});

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

Библиотека легко интегрируется с анимационными фреймворками (например, GSAP), позволяя создавать сложные эффекты при смене секций или слайдов. События onLeave и afterLoad особенно полезны для запуска анимаций в момент появления контента.

new fullpage('#fullpage', {
    afterLoad: function(origin, destination){
        gsap.from(destination.item.querySelector('.animate'), {opacity: 0, y: 50, duration: 1});
    }
});

Ключевые преимущества fullPage.js

  • Полноэкранный скролл без сложной верстки.
  • Поддержка вертикальных и горизонтальных слайдов.
  • Навигация с точками, меню и якорями.
  • Расширяемый API и события для кастомизации.
  • Адаптивность под мобильные устройства и сенсорные экраны.
  • Простая интеграция с анимационными библиотеками.

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

Оглавление