Повноекранне скроління на чистому CSS — це біль. scroll-snap працює по-різному в Chrome і Safari, на мобільних смикається, а про історію браузера та URL-якорі можна забути. jQuery-рішення потребують 200+ рядків коду й однаково ламаються на різній висоті екранів.

fullPage.js закриває це завдання повністю. Бібліотека з понад 35 000 зірок на GitHub-репозиторії та 2,5 млн завантажень на місяць через jsDelivr CDN дає передбачуване скроління секціями, горизонтальні слайди, ледаче завантаження і 80+ налаштувань із коробки. Версія 4.0.41 (березень 2026) працює на Vanilla JS, jQuery більше не потрібен.

Нижче, покроковий посібник з інтеграції fullPage.js у WordPress: від підключення через wp_enqueue_script до відео-фону та точкового вимкнення стилів. Без плагінів, із повним контролем над кожним пікселем.

💡 Швидкий огляд:

• Підключаємо fullPage.js через wp_enqueue_script, один хук, жодних зайвих плагінів
• Налаштовуємо секції, якорі та навігацію під структуру сторінки
• Додаємо відео-фон з автоматичною паузою, коли користувач залишає секцію
• Вирішуємо проблему довгих блоків через scrollOverflow і fp-auto-height
• Вимикаємо стилі бібліотеки точково, не вирізаючи її повністю

Що таке fullPage.js

fullPage.js — це JavaScript-бібліотека для сайтів із повноекранним вертикальним прокручуванням. Сторінка нарізається на секції, кожна займає рівно висоту екрана. Скрол або тач перекидає користувача між секціями плавною анімацією. Всередині секцій, горизонтальні слайди.

Актуальна версія, 4.0.41 (березень 2026). Бібліотеку повністю переписано на Vanilla JS: відмова від jQuery зекономила близько 80 КБ. Підтримуються всі сучасні браузери та мобільні пристрої. IE11 працює на версії 3.x.

Для WordPress є офіційні плагіни під Elementor, Gutenberg і Divi. Плагіни платні, але збирають лендинг візуально, без коду. Якщо потрібен повний контроль, підключаємо бібліотеку в тему вручну.

Крок 1. Підключення fullPage.js до WordPress

Правильний спосіб, через wp_enqueue_script у functions.php. Жодних хардкодних <script> у футері, жодних вставок через wp_head.

Завантажуємо fullpage.min.js і fullpage.min.css з офіційного репозиторію або підключаємо через CDN. Для продакшену надійніше локальний файл, менше зовнішніх залежностей і швидше завантаження.

Кладемо файли в папку теми, наприклад /assets/fullpage/, і додаємо в functions.php:

1
/**
2
 * Подключение fullPage.js только для главной страницы.
3
 */
4
function sd_register_fullpage() {
5
    if ( ! is_front_page() ) {
6
        return;
7
    }
8
 
9
    wp_enqueue_style(
10
        'sd-fullpage',
11
        get_template_directory_uri() . '/assets/fullpage/fullpage.min.css',
12
        array(),
13
        '4.0.41'
14
    );
15
 
16
    wp_enqueue_script(
17
        'sd-fullpage',
18
        get_template_directory_uri() . '/assets/fullpage/fullpage.min.js',
19
        array(),
20
        '4.0.41',
21
        true
22
    );
23
}
24
add_action( 'wp_enqueue_scripts', 'sd_register_fullpage' );

Що тут важливо: is_front_page() обмежує завантаження лише головною, бібліотека не висить на всьому сайті. Четвертий параметр true ставить скрипт у футер, сторінка рендериться без затримки. Версія в третьому аргументі допомагає скинути кеш під час оновлення, браузер підхопить новий файл, а не закешований старий.

Якщо зручніше CDN, замініть get_template_directory_uri() на прямі посилання з мережі jsDelivr або cdnjs. Версію в URL фіксуйте явно ([email protected]), не беріть @latest, оновлення мажорної версії може зламати сайт без попередження.

Крок 2. Базова конфігурація

HTML-структура проста: обгортка з id="fullpage" і секції з класом section. Всередині секцій, горизонтальні слайди з класом slide.

1
<div id="fullpage">
2
    <div class="section">Первая секция</div>
3
    <div class="section">Вторая секция</div>
4
    <div class="section">
5
        <div class="slide">Слайд 1</div>
6
        <div class="slide">Слайд 2</div>
7
    </div>
8
</div>

Ініціалізація, на Vanilla JS, у файлі fullpage-init.js, який підключаємо після бібліотеки:

1
document.addEventListener('DOMContentLoaded', function () {
2
    new fullpage('#fullpage', {
3
        // Навигация
4
        anchors: ['intro', 'features', 'pricing', 'contact'],
5
        navigation: true,
6
        navigationPosition: 'right',
7
 
8
        // Скроллинг
9
        scrollingSpeed: 700,
10
        autoScrolling: true,
11
        fitToSection: true,
12
        scrollBar: false,
13
        easing: 'easeInOutCubic',
14
 
15
        // Адаптив
16
        responsiveWidth: 1024,
17
        responsiveHeight: 768,
18
 
19
        // Дизайн
20
        verticalCentered: true,
21
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f5f5f5'],
22
        paddingTop: '2em',
23
 
24
        // Производительность
25
        lazyLoading: true,
26
        observer: true
27
    });
28
});

Ключові опції, які варто свідомо налаштувати з першого запуску:

• anchors, якорі для прямих посилань на секції (site.com/#features). Без них URL не змінюється під час скролу, не можна дати посилання на конкретний блок.
• navigation, точки праворуч. Користувач одразу бачить, скільки секцій і де він перебуває.
• scrollingSpeed, швидкість анімації в мс. 700, золота середина: не смикано і не затягнуто.
• responsiveWidth і responsiveHeight, на екранах, менших за задані розміри, повноекранний скролінг вимикається автоматично. Інакше на планшетах і телефонах контент обрізається.
• scrollBar, смуга прокручування. false для чистого full-page-ефекту; true зручно під час налагодження.

Повний список із понад 80 опцій, в офіційній документації.

Крок 3. Вертикальна навігація

Штатні точки навігації вмикаються прапорцем navigation: true. Але стилізація за замовчуванням мінімальна, сірі кола праворуч. Вписуємо їх у дизайн через CSS:

1
/* Цвет и размер точек навигации */
2
#fp-nav ul li a span {
3
    background: #4b944e;
4
    width: 10px;
5
    height: 10px;
6
    margin: -5px 0 0 -5px;
7
}
8
 
9
#fp-nav ul li a.active span {
10
    background: #fff;
11
    border: 2px solid #4b944e;
12
}
13
 
14
/* Подсказки при наведении */
15
#fp-nav ul li .fp-tooltip {
16
    color: #333;
17
    font-size: 14px;
18
    font-family: inherit;
19
}

Якщо штатна навігація конфліктує з темою або не відрендерилася, пишемо ручну прив'язку через jQuery. Скрипт нижче відстежує активний клас на секціях і підсвічує відповідний пункт меню:

1
jQuery(document).ready(function ($) {
2
    $(window).scroll(function () {
3
        if ($(window).scrollTop() <= 1) return;
4
 
5
        var sections = [
6
            'fullPage-1', 'fullPage-2', 'fullPage-3', 'fullPage-4',
7
            'fullPage-5', 'fullPage-6', 'fullPage-7', 'fullPage-8',
8
            'fullPage-9', 'fullPage-10'
9
        ];
10
 
11
        sections.forEach(function (cls, i) {
12
            var isActive = $('.' + cls).hasClass('active');
13
            var navItem = $('#fp-nav > ul > li:nth-child(' + (i + 1) + ') > a');
14
 
15
            if (isActive) {
16
                navItem.addClass('active');
17
                navItem.find('span').css('background', '#fff');
18
            } else {
19
                navItem.removeClass('active');
20
                navItem.find('span').css('background', '#4b944e');
21
            }
22
        });
23
    });
24
});

Сам код навігаційної панелі, ненумерований список із посиланнями на якорі:

1
<ul id="fp-nav">
2
    <li><a href="#intro" class="active"></a></li>
3
    <li><a href="#features"></a></li>
4
    <li><a href="#pricing"></a></li>
5
    <li><a href="#contact"></a></li>
6
</ul>

На практиці цей запасний варіант рятує, коли тема перевизначає селектори fullPage.js або використовує нестандартну структуру DOM. Код підставляється у footer.php або через wp_add_inline_script.

Крок 4. Відеофон і керування відтворенням

Відео на фоні першої секції, ефектний прийом. Але без контролю воно продовжує грати після виходу з секції та марно споживає ресурси. Вирішується через колбек afterLoad.

HTML першої секції з відео:

1
<div class="section" id="intro">
2
    <video id="bgVideo" loop muted playsinline data-autoplay>
3
        <source src="/wp-content/uploads/video/background.mp4" type="video/mp4">
4
    </video>
5
    <div class="layer">
6
        <h1>Заголовок на фоне видео</h1>
7
    </div>
8
</div>

Атрибут playsinline обов'язковий для iOS, без нього Safari відкриває відео в повноекранному плеєрі. Зв'язка loop muted data-autoplay дає безшовне фонове відтворення.

Керування через afterLoad у конфігурації fullPage.js:

1
new fullpage('#fullpage', {
2
    // ...остальные опции...
3
    afterLoad: function (anchorLink, index) {
4
        var video = document.querySelector('#bgVideo');
5
        if (!video) return;
6
 
7
        if (index === 1) {
8
            video.play();
9
        } else {
10
            video.pause();
11
        }
12
    }
13
});

Колбек спрацьовує при вході на секцію. Індекс 1, перша секція, запускаємо відео. Будь-яка інша, пауза. Процесор і батарея на мобільних не витрачаються даремно.

Для ручного контролю додаємо кнопку Play/Pause, обробник перемикає іконку та смикає video.play() / video.pause(). Користувач отримує вибір, механіка повноекранного скролу не ламається.

Крок 5. Довгі блоки, scrollOverflow та автовисота

Коли контент секції не вміщується у висоту екрана, низ обрізається. Вмикаємо scrollOverflow:

1
new fullpage('#fullpage', {
2
    scrollOverflow: true
3
});

Опція додає внутрішній скролбар конкретної секції, решта секцій не зачіпаються. Цього достатньо в більшості випадків.

Для тоншого контролю вішаємо CSS-класи прямо на секцію:

1
<div class="section fp-normal-scroll fp-auto-height">
2
    <!-- Длинный контент со свободной прокруткой -->
3
</div>

fp-auto-height знімає обмеження «рівно 100vh», висота секції визначається контентом. fp-normal-scroll вимикає snap-ефект, секція прокручується природно. Комбінація ідеальна для футерів, довгих таблиць і сторінок зі змінною висотою блоків.

У блочних редакторах на кшталт King Composer класи додаються в налаштуваннях рядка:

Крок 6. Вимикаємо стилі fullPage.js точково

Буває, що бібліотека перевизначає CSS сайту, зсуває позиціювання, змінює відступи, ширину секцій. Вирізати fullPage.js повністю не потрібно: вимикаємо лише проблемні стилі.

Приклад скидання позиціювання для секцій з 3-ї по 8-му:

1
/* Сброс стилей fullPage.js для выбранных секций */
2
.fullpage-wrapper section:nth-child(n+3):nth-child(-n+8) {
3
    left: inherit !important;
4
    padding-left: inherit !important;
5
    width: inherit !important;
6
    height: inherit !important;
7
    padding-top: inherit !important;
8
    padding-bottom: inherit !important;
9
    background-color: inherit !important;
10
}

Селектор :nth-child(n+3):nth-child(-n+8) б'є точно в діапазон. !important тут виправданий, fullPage.js задає стилі інлайн, перебити їх можна тільки так. Але застосовуйте точково: один !important на всю сторінку, і каскад перетворюється на кашу.

Готові WordPress-теми з fullPage.js

Якщо не хочете інтегрувати бібліотеку в наявну тему вручну, візьміть готову заготовку. Актуальні стартові теми на GitHub:

• starter-fullpagejs, мінімальний стартер, хороша відправна точка для кастомного верстання
• wordpress-onepager, легка тема для односторінкових сайтів (репозиторій недоступний, шукайте форки)
• derkodde_fullpagetheme, тема з підтримкою секцій і слайдів (репозиторій видалено, використовуйте як концепт)
• MyPortfolio, портфоліо на fullPage.js
• dandelion, односторінкова тема з чистим дизайном

Усі теми під GPL, потребують доопрацювання під конкретний проєкт. Але структуру секцій і базову інтеграцію fullPage.js дають готову, економить пів дня роботи.

Також є офіційна WordPress-тема від розробника і згадані вище плагіни під Elementor, Gutenberg і Divi. Плагіни платні, але закривають 95% задач без жодного рядка коду.

Коротке відео зі встановлення та налаштування fullPage.js у WordPress, наочно показує процес інтеграції через офіційний плагін для Divi.

⁉️🤔 Часті запитання

fullPage.js безкоштовний?

Так, для open-source проєктів за ліцензією GPLv3 повністю безкоштовно. Для закритих комерційних сайтів потрібна комерційна ліцензія. Плагіни для WordPress під Elementor, Gutenberg і Divi, окремі платні продукти, від $29 за сайт.

Чим fullPage.js кращий за CSS Scroll Snap?

CSS Scroll Snap поводиться по-різному в браузерах: у Safari плавно, у Chrome ривками, на мобільних із затримкою. fullPage.js дає однакову поведінку всюди. Плюс з коробки: URL-якорі, історія браузера, горизонтальні слайди, внутрішній скрол у секціях і 37 варіантів анімацій. Без поліфілів і ручних милиць.

Як вимкнути fullPage.js на мобільних?

Опції responsiveWidth: 1024 і responsiveHeight: 768 у конфігурації. Коли ширина екрана менша за 1024px або висота менша за 768px, бібліотека автоматично вимикає snap-скролинг і повертає звичайне прокручування. Жодних додаткових перевірок userAgent не потрібно.

Чи можна використовувати fullPage.js із WooCommerce?

Так, але обережно. Сторінки товарів і кошика не повинні бути повноекранними — це ламає UX покупок. Підключайте fullPage.js лише до головної сторінки або конкретних лендингів через умовні теги WordPress: is_front_page() або is_page('landing').

Чому відео на фоні не відтворюється на iOS?

Safari на iPhone та iPad вимагає атрибут playsinline у тега <video>. Без нього відео переходить у повноекранний плеєр і не працює як фон. Також переконайтеся, що відео закодоване в H.264 (MP4), HEVC підтримується не на всіх пристроях Apple.

FullPage.js у 2026 році: ручне підключення чи плагін

Якщо робите лендинг, портфоліо або презентаційний сайт, fullPage.js дає візуальний ефект, який на чистому CSS не зібрати. 35 000+ зірок на GitHub і 2,5 млн встановлень на місяць підтверджують: бібліотека жива й стабільна.

Для інтернет-магазинів, блогів та адмінок не варто. Повноекранний скролинг заважає навігації та споживанню контенту, користувач втомлюється від нього через 3-4 свайпи.

Вибір шляху: потрібен повний контроль над кожною секцією та готовність писати код, ручне підключення через wp_enqueue_script. Хочете зібрати лендинг візуально в Elementor або Gutenberg за годину, беріть офіційний плагін. Обидва підходи перевірені на практиці, обидва працюють без сюрпризів.

Пробували fullPage.js у своїх проєктах? Діліться досвідом у коментарях, зберемо живий список рішень для типових проблем інтеграції.