Создание секций

Для работы с fullPage.js необходимо подключить библиотеку и её стили. Библиотеку можно использовать через CDN или установить через npm. Пример подключения через CDN:

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

Если используется npm:

npm install fullpage.js
import fullpage from 'fullpage.js';
import 'fullpage.js/dist/fullpage.min.css';

HTML-структура должна содержать контейнер с секциями:

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

Каждая секция создаётся с классом .section, который является обязательным для распознавания fullPage.js.

Инициализация fullPage.js

Для запуска скрипта используется конструктор new fullpage():

new fullpage('#fullpage', {
    autoScrolling: true, 
    navigation: true,
    scrollingSpeed: 700,
});

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

  • autoScrolling – включает плавную прокрутку между секциями.
  • navigation – добавляет навигацию в виде точек справа.
  • scrollingSpeed – задаёт скорость анимации перехода между секциями в миллисекундах.

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

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

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

Инициализация остаётся прежней. Навигация по слайдам осуществляется стрелками или свайпами. Дополнительно можно включить горизонтальные стрелки:

new fullpage('#fullpage', {
    controlArrows: true,
    slidesNavigation: true,
});
  • controlArrows – показывает стрелки для перехода между слайдами.
  • slidesNavigation – добавляет индикаторы навигации для слайдов.

Настройка размеров и адаптивность

Секции по умолчанию растягиваются на всю высоту экрана. Можно управлять поведением с помощью параметров:

new fullpage('#fullpage', {
    responsiveWidth: 900,
    responsiveHeight: 600,
    fitToSection: true,
});
  • responsiveWidth и responsiveHeight – отключают fullPage.js на экранах меньше указанных размеров.
  • fitToSection – автоматически подстраивает секцию под высоту окна при загрузке и изменении размера.

Добавление идентификаторов и якорей

Каждой секции можно присвоить уникальный id или data-anchor, чтобы реализовать навигацию по URL:

<div class="section" data-anchor="home">Главная</div>
<div class="section" data-anchor="about">О нас</div>
<div class="section" data-anchor="contact">Контакты</div>

Инициализация с использованием якорей:

new fullpage('#fullpage', {
    anchors: ['home', 'about', 'contact'],
    navigation: true,
});

Теперь URL будет изменяться при переходе между секциями, например: #about.

События секций

fullPage.js предоставляет множество событий для взаимодействия с секциями:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        console.log('Покидаем секцию', origin.index);
    },
    afterLoad: function(origin, destination, direction){
        console.log('Загружена секция', destination.index);
    }
});
  • onLeave – вызывается перед сменой секции.
  • afterLoad – вызывается после завершения анимации перехода.
  • afterSlideLoad и onSlideLeave – аналогичные события для слайдов внутри секций.

С помощью этих событий можно запускать анимации, изменять классы или управлять внешними элементами интерфейса.

Стилизация секций

Для придания секциям индивидуального внешнего вида используются CSS-классы .section и .slide. Например:

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.section:nth-child(odd) {
    background-color: #3498db;
    color: white;
}

.section:nth-child(even) {
    background-color: #2ecc71;
    color: white;
}

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

Динамическое создание секций

Секции можно добавлять и удалять программно:

fullpage_api.addSection('Новая секция', document.getElementById('newSection'));
fullpage_api.moveSectionDown();
fullpage_api.removeSection(2);
  • addSection – добавляет новую секцию в конец.
  • removeSection – удаляет указанную секцию по индексу.
  • moveSectionDown – позволяет программно перейти к следующей секции.

Оптимизация производительности

При большом количестве секций рекомендуется:

  1. Использовать минимальные CSS-анимации вместо тяжелых библиотек.
  2. Подгружать изображения по мере необходимости (lazyLoad).
  3. Ограничивать количество событий на scroll и resize.
new fullpage('#fullpage', {
    lazyLoading: true,
});

lazyLoading откладывает загрузку медиафайлов до момента появления секции на экране, что ускоряет начальную загрузку страницы.

Итоговое взаимодействие

Используя сочетание вертикальных секций, горизонтальных слайдов, якорей и событий, fullPage.js позволяет создавать полностью интерактивные одностраничные сайты. Управление секциями может быть реализовано через API, а визуальные эффекты — через CSS и встроенные параметры библиотеки.

Оглавление