Полноэкранный скроллинг на чистом 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-структура проста: обёртка c 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 в своих проектах? Делитесь опытом в комментариях, соберём живой список решений для типовых проблем интеграции.