Минимальный рабочий пример

Для работы с fullPage.js необходимо подключить библиотеку к проекту. Библиотека состоит из CSS и JS файлов, которые можно подключить как через CDN, так и локально:

<!-- Подключение CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.11/fullpage.min.css" />

<!-- Подключение JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.11/fullpage.min.js"></script>

Также требуется обернуть все секции в контейнер с уникальным идентификатором, например, #fullpage. Каждая секция страницы должна иметь класс section:

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

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

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

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

Пояснения к параметрам:

  • autoScrolling: true — включает прокрутку страниц по одному экрану.
  • navigation: true — добавляет навигационные точки справа экрана для быстрого перехода между секциями.

Настройка базовой навигации

FullPage.js предоставляет возможность перемещаться между секциями с помощью стрелок клавиатуры, навигации или прокрутки мышью. Для базового примера достаточно добавить опцию navigation: true.

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    navigationPosition: 'right', // Позиция точек навигации: left / right
});

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

new fullpage('#fullpage', {
    keyboardScrolling: true,
});

Добавление горизонтальных слайдов

FullPage.js поддерживает горизонтальные слайды внутри секций. Для этого внутри секции используется контейнер с классом slides и отдельные слайды с классом slide:

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

Инициализация остаётся той же, дополнительной настройки для слайдов не требуется, кроме опциональных параметров, таких как controlArrows:

new fullpage('#fullpage', {
    controlArrows: true, // Показывать стрелки для переключения слайдов
});

Настройка цветов секций

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

<div id="fullpage">
    <div class="section" style="background-color: #ff5f45;">Секция 1</div>
    <div class="section" style="background-color: #0798ec;">Секция 2</div>
    <div class="section" style="background-color: #fc6c7c;">Секция 3</div>
</div>

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

FullPage.js позволяет добавлять обработчики событий, таких как onLeave и afterLoad. Простейший пример:

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

Параметры колбеков:

  • origin — объект исходной секции.
  • destination — объект секции назначения.
  • direction — направление перехода (up или down).

Минимальный рабочий пример целиком

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>FullPage.js Минимум</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.11/fullpage.min.css" />
    <style>
        .section { text-align: center; font-size: 3em; color: #fff; }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section" style="background-color: #ff5f45;">Секция 1</div>
        <div class="section" style="background-color: #0798ec;">Секция 2</div>
        <div class="section" style="background-color: #fc6c7c;">Секция 3</div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.11/fullpage.min.js"></script>
    <script>
        new fullpage('#fullpage', {
            autoScrolling: true,
            navigation: true,
            onLeave: function(origin, destination, direction){
                console.log(`Покидаем секцию ${origin.index + 1}`);
            },
            afterLoad: function(origin, destination, direction){
                console.log(`Загружена секция ${destination.index + 1}`);
            }
        });
    </script>
</body>
</html>

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

Оглавление