Структура секций

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

Основной контейнер

Все секции должны быть обернуты в основной контейнер с идентификатором или классом, который будет передан в инициализацию fullPage.js:

<div id="fullpage">
    <div class="section">Первая секция</div>
    <div class="section">Вторая секция</div>
    <div class="section">Третья секция</div>
</div>
  • id="fullpage" – уникальный идентификатор контейнера.
  • .section – обязательный класс для каждой отдельной секции.
  • Порядок секций в DOM определяет последовательность навигации.

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

FullPage.js поддерживает как вертикальные, так и горизонтальные секции (слайды). Горизонтальные слайды используются внутри вертикальной секции для создания внутренних перелистываний.

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
    <div class="slide">Слайд 3</div>
</div>
  • .slide – класс для горизонтального слайда.
  • Слайды автоматически наследуют размеры секции.
  • Переходы между слайдами управляются параметрами controlArrows, loopHorizontal и slidesNavigation.

Идентификаторы и якоря

Каждой секции и слайду можно задать якорь для прямой навигации через URL:

<div class="section" data-anchor="firstSection">Первая секция</div>
<div class="section" data-anchor="secondSection">
    <div class="slide" data-anchor="slide1">Слайд 1</div>
    <div class="slide" data-anchor="slide2">Слайд 2</div>
</div>
  • data-anchor позволяет использовать URL вида #secondSection/slide2.
  • Якоря делают возможным внешнюю навигацию и интеграцию с меню.

Вложенные контейнеры и контент

Секции могут содержать любые HTML-элементы, включая текст, изображения, видео, формы и интерактивные блоки. Рекомендуется оборачивать контент в отдельный контейнер для удобного позиционирования:

<div class="section">
    <div class="content-wrapper">
        <h1>Заголовок секции</h1>
        <p>Описание и дополнительные элементы</p>
    </div>
</div>
  • .content-wrapper позволяет задавать отступы и центровку через CSS.
  • Позволяет избежать конфликтов с размерами секции, особенно при адаптивной верстке.

Управление размерами секций

FullPage.js автоматически задает высоту секции равной высоте окна браузера. Для адаптивных интерфейсов рекомендуется использовать CSS для внутренних контейнеров, чтобы контент сохранял пропорции на разных устройствах:

.section {
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-wrapper {
    max-width: 1200px;
    padding: 20px;
}
  • display: flex упрощает вертикальное и горизонтальное центрирование.
  • Максимальная ширина предотвращает растяжение контента на больших экранах.

Множественные секции и слайды

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

<div class="section" data-anchor="section1">
    <div class="slide" data-anchor="slide1-1">Слайд 1-1</div>
    <div class="slide" data-anchor="slide1-2">Слайд 1-2</div>
</div>
<div class="section" data-anchor="section2">Секция 2</div>
<div class="section" data-anchor="section3">Секция 3</div>
  • Каждый слайд внутри секции получает отдельный индекс, который используется для программной навигации.
  • FullPage.js автоматически обрабатывает переходы между вертикальными секциями и горизонтальными слайдами.

Дополнительные рекомендации

  • Использовать отдельные классы и идентификаторы для удобного управления стилями и анимацией.
  • Разделять контент на логические блоки, чтобы не перегружать секцию.
  • Слайды внутри одной секции должны иметь одинаковый высотный и ширинный контекст, чтобы избежать искажений при перелистывании.

Структура секций и слайдов в fullPage.js формирует основу для всего пользовательского интерфейса с плавным скроллингом. Четкое соблюдение правил разметки обеспечивает корректную работу навигации, адаптивность и совместимость с расширенными возможностями библиотеки.

Оглавление