Pełnoekranowe przewijanie na czystym CSS to ból. scroll-snap działa inaczej w Chrome i Safari, na urządzeniach mobilnych szarpie, a o historii przeglądarki i kotwicach URL można zapomnieć. Rozwiązania jQuery wymagają ponad 200 linii kodu i tak psują się przy różnej wysokości ekranów.

fullPage.js zamyka to zadanie całkowicie. Biblioteka z ponad 35 000 gwiazdek w repozytorium GitHub i 2,5 mln pobrań miesięcznie przez jsDelivr CDN zapewnia przewidywalne przewijanie sekcjami, poziome slajdy, leniwe ładowanie i ponad 80 ustawień od ręki. Wersja 4.0.41 (marzec 2026) działa na Vanilla JS, jQuery nie jest już potrzebne.

Poniżej znajduje się przewodnik krok po kroku po integracji fullPage.js z WordPressem: od podłączenia przez wp_enqueue_script po tło wideo i punktowe wyłączanie stylów. Bez wtyczek, z pełną kontrolą nad każdym pikselem.

💡 Szybki przegląd:

• Podłączamy fullPage.js przez wp_enqueue_script, jeden hak, żadnych zbędnych wtyczek
• Konfigurujemy sekcje, kotwice i nawigację pod strukturę strony
• Dodajemy tło wideo z automatyczną pauzą, gdy użytkownik opuszcza sekcję
• Rozwiązujemy problem długich bloków przez scrollOverflow i fp-auto-height
• Wyłączamy style biblioteki punktowo, nie wycinając jej całkowicie

Czym jest fullPage.js

fullPage.js to biblioteka JavaScript do stron z pełnoekranowym przewijaniem pionowym. Strona jest dzielona na sekcje, z których każda zajmuje dokładnie wysokość ekranu. Przewijanie lub dotyk przerzuca użytkownika między sekcjami z płynną animacją. Wewnątrz sekcji znajdują się poziome slajdy.

Aktualna wersja to 4.0.41 (marzec 2026). Biblioteka została całkowicie przepisana na Vanilla JS: rezygnacja z jQuery pozwoliła zaoszczędzić około 80 KB. Obsługiwane są wszystkie nowoczesne przeglądarki i urządzenia mobilne. IE11 działa na wersji 3.x.

Dla WordPressa istnieją oficjalne wtyczki pod Elementor, Gutenberg i Divi. Wtyczki są płatne, ale pozwalają zbudować landing page wizualnie, bez kodu. Jeśli potrzebna jest pełna kontrola, podłączamy bibliotekę do szablonu ręcznie.

Krok 1. Podłączenie fullPage.js do WordPressa

Prawidłowy sposób to użycie wp_enqueue_script w functions.php. Żadnych zahardkodowanych znaczników <script> w stopce, żadnych wstawek przez wp_head.

Pobieramy fullpage.min.js i fullpage.min.css z oficjalnego repozytorium lub podłączamy przez CDN. W przypadku produkcji bardziej niezawodny jest plik lokalny, co oznacza mniej zależności zewnętrznych i szybsze ładowanie.

Umieszczamy pliki w folderze szablonu, na przykład /assets/fullpage/, i dodajemy w 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' );

Co tu jest ważne: is_front_page() ogranicza ładowanie tylko do strony głównej, biblioteka nie wisi na całej witrynie. Czwarty parametr true umieszcza skrypt w stopce, strona renderuje się bez opóźnienia. Wersja w trzecim argumencie pomaga zresetować cache podczas aktualizacji, przeglądarka pobierze nowy plik, a nie stary z pamięci podręcznej.

Jeśli wygodniejszy jest CDN, proszę zastąpić get_template_directory_uri() bezpośrednimi linkami z sieci jsDelivr lub cdnjs. Wersję w URL proszę podawać jawnie ([email protected]), nie używać @latest, aktualizacja wersji głównej może bez ostrzeżenia uszkodzić witrynę.

Krok 2. Podstawowa konfiguracja

Struktura HTML jest prosta: opakowanie z id="fullpage" i sekcje z klasą section. Wewnątrz sekcji, poziome slajdy z klasą 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>

Inicjalizacja, na Vanilla JS, w pliku fullpage-init.js, który podłączamy po bibliotece:

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
});

Kluczowe opcje, które warto świadomie skonfigurować od pierwszego uruchomienia:

• anchors, kotwice do bezpośrednich linków do sekcji (site.com/#features). Bez nich URL nie zmienia się podczas przewijania, nie można podać linku do konkretnego bloku.
• navigation, kropki po prawej stronie. Użytkownik od razu widzi, ile jest sekcji i gdzie się znajduje.
• scrollingSpeed, szybkość animacji w ms. 700, złoty środek: nie szarpie i nie ciągnie się.
• responsiveWidth i responsiveHeight, na ekranach mniejszych niż podane rozmiary pełnoekranowe przewijanie wyłącza się automatycznie. W przeciwnym razie na tabletach i telefonach treść jest przycinana.
• scrollBar, pasek przewijania. false dla czystego efektu full-page; true jest wygodne podczas debugowania.

Pełna lista z ponad 80 opcjami, w oficjalnej dokumentacji.

Krok 3. Nawigacja pionowa

Domyślne punkty nawigacji włącza się flagą navigation: true. Jednak domyślna stylizacja jest minimalna, szare koła po prawej stronie. Wpisujemy je w projekt za pomocą 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
}

Jeśli domyślna nawigacja koliduje z motywem lub nie wyrenderowała się, piszemy ręczne powiązanie przez jQuery. Skrypt poniżej śledzi aktywną klasę na sekcjach i podświetla odpowiedni element menu:

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
});

Sam kod panelu nawigacyjnego, lista nieuporządkowana z linkami do kotwic:

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>

W praktyce ten wariant zapasowy ratuje sytuację, gdy motyw nadpisuje selektory fullPage.js lub używa niestandardowej struktury DOM. Kod wstawia się do footer.php lub przez wp_add_inline_script.

Krok 4. Tło wideo i sterowanie odtwarzaniem

Wideo w tle pierwszej sekcji, efektowny zabieg. Ale bez kontroli gra ono dalej po opuszczeniu sekcji i niepotrzebnie zużywa zasoby. Rozwiązuje się to przez callback afterLoad.

HTML pierwszej sekcji z wideo:

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>

Atrybut playsinline jest obowiązkowy dla iOS, bez niego Safari otwiera wideo w pełnoekranowym odtwarzaczu. Połączenie loop muted data-autoplay daje płynne odtwarzanie w tle.

Sterowanie przez afterLoad w konfiguracji 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
});

Kolbek uruchamia się przy wejściu na sekcję. Indeks 1, pierwsza sekcja, odtwarzamy wideo. Każda inna, pauza. Procesor i bateria na urządzeniach mobilnych nie są marnowane.

Dla ręcznej kontroli dodajemy przycisk Play/Pause, handler przełącza ikonę i wywołuje video.play() / video.pause(). Użytkownik dostaje wybór, mechanika pełnoekranowego scrolla nie psuje się.

Krok 5. Długie bloki, scrollOverflow i autowysokość

Gdy zawartość sekcji nie mieści się na wysokości ekranu, dół jest obcinany. Włączamy scrollOverflow:

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

Opcja dodaje wewnętrzny scrollbar konkretnej sekcji, pozostałe sekcje nie są naruszane. To wystarcza w większości przypadków.

Dla precyzyjniejszej kontroli przypinamy klasy CSS bezpośrednio do sekcji:

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

fp-auto-height zdejmuje ograniczenie „dokładnie 100vh", wysokość sekcji jest określana przez zawartość. fp-normal-scroll wyłącza efekt snap, sekcja przewija się naturalnie. Kombinacja jest idealna dla stopek, długich tabel i stron ze zmienną wysokością bloków.

W edytorach blokowych, takich jak King Composer, klasy dodaje się w ustawieniach wiersza:

Krok 6. Wyłączamy style fullPage.js punktowo

Zdarza się, że biblioteka nadpisuje CSS strony, przesuwa pozycjonowanie, zmienia odstępy, szerokość sekcji. Nie trzeba wycinać fullPage.js całkowicie: wyłączamy tylko problematyczne style.

Przykład resetowania pozycjonowania dla sekcji od 3. do 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
}

Selektor :nth-child(n+3):nth-child(-n+8) trafia dokładnie w zakres. !important jest tu uzasadniony, fullPage.js ustawia style inline, można je przebić tylko w ten sposób. Ale stosujcie punktowo: jeden !important na całą stronę i kaskada zamienia się w bałagan.

Gotowe motywy WordPress z fullPage.js

Jeśli nie chcecie integrować biblioteki z istniejącym motywem ręcznie, weźcie gotowy szablon. Aktualne motywy startowe na GitHubie:

• starter-fullpagejs, minimalny starter, dobry punkt wyjścia do customowego kodowania
• wordpress-onepager, lekki motyw dla stron jednostronicowych (repozytorium niedostępne, szukajcie forków)
• derkodde_fullpagetheme, motyw z obsługą sekcji i slajdów (repozytorium usunięte, użyjcie jako konceptu)
• MyPortfolio, portfolio na fullPage.js
• dandelion, jednostronicowy motyw z czystym designem

Wszystkie motywy na licencji GPL, wymagają dopracowania pod konkretny projekt. Ale strukturę sekcji i podstawową integrację fullPage.js dają gotową, oszczędza to pół dnia pracy.

Jest też oficjalny motyw WordPress od dewelopera i wspomniane wyżej wtyczki pod Elementora, Gutenberga i Divi. Wtyczki są płatne, ale zamykają 95% zadań bez ani jednej linii kodu.

Krótkie wideo z instalacji i konfiguracji fullPage.js w WordPressie, pokazuje w praktyce proces integracji przez oficjalną wtyczkę dla Divi.

⁉️🤔 Najczęściej zadawane pytania

Czy fullPage.js jest darmowy?

Tak, dla projektów open-source na licencji GPLv3 jest całkowicie bezpłatny. W przypadku zamkniętych komercyjnych stron internetowych wymagana jest licencja komercyjna. Wtyczki do WordPressa pod Elementor, Gutenberg i Divi to osobne płatne produkty, od 29 USD za stronę.

Czym fullPage.js jest lepszy od CSS Scroll Snap?

CSS Scroll Snap zachowuje się różnie w przeglądarkach: w Safari płynnie, w Chrome szarpie, na urządzeniach mobilnych z opóźnieniem. fullPage.js zapewnia jednolite działanie wszędzie. Dodatkowo od razu po instalacji: kotwice URL, historia przeglądarki, poziome slajdy, wewnętrzne przewijanie w sekcjach i 37 wariantów animacji. Bez polyfilli i ręcznych obejść.

Jak wyłączyć fullPage.js na urządzeniach mobilnych?

Opcje responsiveWidth: 1024 i responsiveHeight: 768 w konfiguracji. Gdy szerokość ekranu jest mniejsza niż 1024px lub wysokość mniejsza niż 768px, biblioteka automatycznie wyłącza przewijanie snap i przywraca zwykłe przewijanie. Żadne dodatkowe sprawdzanie userAgent nie jest potrzebne.

Czy można używać fullPage.js z WooCommerce?

Tak, ale ostrożnie. Strony produktów i koszyka nie powinny być pełnoekranowe, psuje to UX zakupów. Należy podłączać fullPage.js tylko do strony głównej lub konkretnych landing page'y za pomocą warunkowych tagów WordPress: is_front_page() lub is_page('landing').

Dlaczego wideo w tle nie odtwarza się na iOS?

Safari na iPhone i iPad wymaga atrybutu playsinline w tagach <video>. Bez niego wideo przechodzi do pełnoekranowego odtwarzacza i nie działa jako tło. Należy również upewnić się, że wideo jest zakodowane w H.264 (MP4), HEVC nie jest obsługiwane na wszystkich urządzeniach Apple.

FullPage.js w 2026 roku: ręczne podłączenie czy wtyczka

Jeśli tworzy Pan/Pani landing page, portfolio lub stronę prezentacyjną, fullPage.js daje efekt wizualny, którego nie da się osiągnąć za pomocą samego CSS. Ponad 35 000 gwiazdek na GitHub i 2,5 miliona instalacji miesięcznie potwierdzają: biblioteka jest żywa i stabilna.

W przypadku sklepów internetowych, blogów i paneli administracyjnych nie warto. Pełnoekranowe przewijanie przeszkadza w nawigacji i konsumpcji treści, użytkownik męczy się nim po 3-4 przeciągnięciach.

Wybór ścieżki: jeśli potrzebuje Pan/Pani pełnej kontroli nad każdą sekcją i jest gotów pisać kod, ręczne podłączenie przez wp_enqueue_script. Jeśli chce Pan/Pani zbudować landing page wizualnie w Elementorze lub Gutenbergu w godzinę, proszę wybrać oficjalną wtyczkę. Oba podejścia są sprawdzone w praktyce, oba działają bez niespodzianek.

Próbowali Państwo fullPage.js w swoich projektach? Proszę podzielić się doświadczeniami w komentarzach, zbierzemy żywą listę rozwiązań dla typowych problemów integracyjnych.