Подключение файлов библиотеки

Для работы с fullPage.js необходимо подключить два основных файла: CSS и JavaScript. Эти файлы обеспечивают корректное отображение секций и работу функционала скроллинга. Существует несколько способов подключения: через CDN или локально.

Подключение через CDN

Подключение через CDN позволяет быстро начать работу без загрузки файлов на сервер. Необходимо вставить ссылки в <head> и перед закрывающим тегом </body>:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>fullPage.js Demo</title>
    <!-- CSS fullPage.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.4/fullpage.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id="fullpage">
        <div class="section">Секция 1</div>
        <div class="section">Секция 2</div>
        <div class="section">Секция 3</div>
    </div>

    <!-- JS fullPage.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.4/fullpage.min.js" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        new fullpage('#fullpage', {
            autoScrolling: true,
            navigation: true
        });
    </script>
</body>
</html>

Ключевые моменты:

  • <link rel="stylesheet"> подключает стили для корректного отображения секций и навигации.
  • <script src="..."></script> подключает основной функционал библиотеки.
  • new fullpage('#fullpage', { ... }) инициализирует скроллинг и задает настройки.

Локальное подключение

Для локального подключения необходимо скачать файлы с официального сайта или через пакетный менеджер (npm/yarn). Обычно структура проекта выглядит так:

project/
│
├─ index.html
├─ css/
│   └─ fullpage.min.css
└─ js/
    └─ fullpage.min.js

В index.html подключение осуществляется следующим образом:

<head>
    <link rel="stylesheet" href="css/fullpage.min.css">
</head>
<body>
    <div id="fullpage">
        <div class="section">Секция 1</div>
        <div class="section">Секция 2</div>
    </div>

    <script src="js/fullpage.min.js"></script>
    <script>
        new fullpage('#fullpage', {
            autoScrolling: true,
            navigation: true
        });
    </script>
</body>

Подключение с помощью npm или yarn

При использовании npm:

npm install fullpage.js

При использовании yarn:

yarn add fullpage.js

После установки файлы можно импортировать в проект:

// ES6 import
import fullpage from 'fullpage.js';
import 'fullpage.js/dist/fullpage.min.css';

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

Преимущества такого подхода:

  • Возможность использовать модульную систему JavaScript.
  • Легко интегрируется с современными сборщиками: Webpack, Vite, Parcel.
  • Полный контроль над версиями библиотеки.

Советы по корректному подключению

  • CSS файл должен быть подключен перед JS, иначе стили могут не примениться.
  • Проверять наличие контейнера с id перед инициализацией fullPage.js.
  • Для правильной работы каждая секция должна иметь класс .section.
  • Использовать актуальные версии fullPage.js, так как устаревшие версии могут иметь несовместимость с современными браузерами.

Итоговая структура подключения

HTML через CDN:

<link rel="stylesheet" href="fullpage.min.css">
<script src="fullpage.min.js"></script>
<script>
    new fullpage('#fullpage', { autoScrolling: true, navigation: true });
</script>

HTML локально:

<link rel="stylesheet" href="css/fullpage.min.css">
<script src="js/fullpage.min.js"></script>
<script>
    new fullpage('#fullpage', { autoScrolling: true, navigation: true });
</script>

JavaScript с модульной системой:

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

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

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

Оглавление