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

Для работы с fullPage.js в проекте на React рекомендуется использовать обёртку react-fullpage, которая упрощает интеграцию библиотеки и позволяет работать с её API через компоненты React. Установка выполняется через npm или yarn:

npm install fullpage.js react-fullpage
# или
yarn add fullpage.js react-fullpage

Импорт необходимых модулей в компонент:

import React from 'react';
import ReactFullpage from '@fullpage/react-fullpage';
import 'fullpage.js/dist/fullpage.css';

Основной компонент и структура секций

Основная структура приложения строится вокруг компонента ReactFullpage. Каждая страница или экран в fullPage.js соответствует отдельной секции (section). Пример базовой структуры:

const FullpageWrapper = () => (
  <ReactFullpage
    scrollingSpeed = {700} 
    navigation
    render={({ state, fullpageApi }) => {
      return (
        <ReactFullpage.Wrapper>
          <div className="section">Первая секция</div>
          <div className="section">Вторая секция</div>
          <div className="section">Третья секция</div>
        </ReactFullpage.Wrapper>
      );
    }}
  />
);

export default FullpageWrapper;

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

  • scrollingSpeed — скорость анимации прокрутки между секциями в миллисекундах.
  • navigation — отображение навигационных точек справа.
  • render — функция, возвращающая JSX с обёрткой ReactFullpage.Wrapper и всеми секциями.

Горизонтальные слайды внутри секции

Для создания горизонтальных слайдов используется контейнер div.slide. Пример структуры:

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

Параметры для управления слайдами:

  • controlArrows — отображение стрелок навигации между слайдами.
  • slidesNavigation — отображение навигации для слайдов.

Работа с API fullPage.js в React

ReactFullpage предоставляет доступ к API через объект fullpageApi, который позволяет управлять навигацией и событиями. Примеры методов:

fullpageApi.moveSectionDown(); // Перейти к следующей секции
fullpageApi.moveSectionUp();   // Вернуться к предыдущей секции
fullpageApi.moveTo(3);         // Перейти к конкретной секции
fullpageApi.moveSlideRight();  // Перейти к следующему слайду
fullpageApi.moveSlideLeft();   // Перейти к предыдущему слайду

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

События и обработчики

FullPage.js предоставляет множество событий, которые можно подключать через пропсы компонента:

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

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

<ReactFullpage
  onLe ave={(origin, destination, direction) => {
    console.log(`Покидаем секцию ${origin.index}, переходим к ${destination.index}`);
  }}
  afterLoad={(origin, destination) => {
    console.log(`Загружена секция ${destination.index}`);
  }}
/>

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

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

  • responsiveWidth и responsiveHeight — определяют ширину или высоту, при которых fullPage.js отключается, позволяя использовать обычную прокрутку.
  • fitToSection — включение/выключение автоматической подгонки секций по высоте экрана.

Пример:

<ReactFullpage
  responsiveWidth={768}
  fitToSection={true}
/>

Динамическое управление контентом

В React можно добавлять или удалять секции динамически. FullPage.js поддерживает метод fullpageApi.reBuild(), который обновляет структуру после изменения DOM.

const addSection = () => {
  setSections([...sections, `Новая секция ${sections.length + 1}`]);
  fullpageApi.reBuild();
};

Стилевое оформление

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

  • .section — каждая вертикальная секция.
  • .slide — горизонтальные слайды внутри секции.

Можно применять Flexbox или Grid для выравнивания контента:

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  background-color: #f2f2f2;
}
.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0;
}

Расширенные возможности

FullPage.js в React поддерживает:

  • Ленивая загрузка изображений через атрибут data-src и параметр lazyLoad.
  • События прокрутки для анимаций элементов в секциях.
  • Кастомные навигационные элементы, которые можно привязать к API fullPage.js.
  • Интеграцию с React Router, чтобы прокрутка секций могла синхронизироваться с URL.

Примеры кастомной навигации

Создание кнопок для перехода между секциями и слайдами:

<button onCl ick={() => fullpageApi.moveSectionDown()}>Вниз</button>
<button onCl ick={() => fullpageApi.moveSlideRight()}>Следующий слайд</button>

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

Оглавление