Täisekraaniline kerimine puhta CSS-iga on piin. scroll-snap käitub Chrome'is ja Safaris erinevalt, mobiilis jääb see kokutama ning brauseri ajaloo ja URL-i ankrute võib unustada. jQuery lahendused vajavad 200+ koodirida ja jooksevad ikkagi erinevatel ekraanikõrgustel kokku.

fullPage.js lahendab selle ülesande täielikult. Rohkem kui 35 000 tärniga GitHubi repositooriumil ja 2,5 miljoni igakuise allalaadimisega jsDelivr CDN-i kaudu pakub see teek etteaimatavat sektsioonide kaupa kerimist, horisontaalseid slaide, laisklaadimist ja enam kui 80 valikut otse karbist. Versioon 4.0.41 (märts 2026) töötab Vanilla JS-il ja jQuery pole enam nõutav.

Allpool on samm-sammuline juhend fullPage.js-i integreerimiseks WordPressi: alates selle laadimisest wp_enqueue_script kaudu kuni videotausta ja valikulise stiilide keelamiseni. Ilma pistikprogrammideta, täieliku kontrolliga iga piksli üle.

💡 Kiirülevaade:

• Laadi fullPage.js wp_enqueue_script kaudu, üks konks, ilma lisapistikprogrammideta
• Seadista sektsioonid, ankrud ja navigatsioon vastavalt lehe struktuurile
• Lisa videotaust, mis sektsioonist lahkumisel automaatselt peatub
• Lahenda pikkade plokkide probleem scrollOverflow ja fp-auto-height abil
• Keela teegi stiilid valikuliselt, ilma seda täielikult välja juurimata

Mis fullPage.js on

fullPage.js on JavaScripti teek täisekraanil vertikaalse kerimisega saitide jaoks. Leht on lõigatud sektsioonideks, millest igaüks võtab täpselt ekraani kõrguse. Kerimine või puudutus liigutab kasutajat sektsioonide vahel sujuva animatsiooniga. Sektsioonide sees on horisontaalsed slaidid.

Praegune versioon on 4.0.41 (märts 2026). Teek on täielikult ümber kirjutatud Vanilla JS-is: jQuery mahajätmine säästis umbes 80 KB. Kõik kaasaegsed brauserid ja mobiilseadmed on toetatud. IE11 töötab 3.x versiooniga.

WordPressi jaoks on olemas ametlikud pistikprogrammid Elementori, Gutenbergi ja Divi jaoks. Pistikprogrammid on tasulised, kuid need ehitavad maandumislehe visuaalselt, ilma koodita. Kui vajad täielikku kontrolli, laadi teek teemasse käsitsi.

1. Samm. fullPage.js-i ühendamine WordPressiga

Õige viis on wp_enqueue_script kaudu failis functions.php. Ei mingeid kõvakodeeritud <script>-e jaluses ega sisestusi wp_head kaudu.

Laadi fullpage.min.js ja fullpage.min.css alla ametlikust repositooriumist või laadi need CDN-i kaudu. Tootmiskeskkonnas on kohalik fail usaldusväärsem, vähem väliseid sõltuvusi ja kiirem laadimine.

Pane failid teemakausta, näiteks /assets/fullpage/, ja lisa see functions.php-sse:

1
/**
2
 * Loading fullPage.js only on the front page.
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' );

Oluline on siin: is_front_page() piirab laadimise ainult esilehele, nii et teek ei istu tervel saidil. Neljas parameeter true paigutab skripti jalusesee ja leht renderdub viivituseta. Kolmanda argumendi versiooninumber aitab uuendamisel vahemälu tühjendada, nii et brauser võtab kasutusele uue faili, mitte ei kasuta vahemälus olevat vana.

Kui CDN on mugavam, asenda get_template_directory_uri() otseviidetega jsDelivri võrgust või cdnjs-ist. Kinnita versioon URL-is selgelt ([email protected]), ära kasuta @latest-it, sest suur versiooniuuendus võib saidi hoiatamata katki teha.

Samm 2. Põhikonfiguratsioon

HTML-struktuur on lihtne: ümbris id="fullpage" ja sektsioonid klassiga section. Sektsioonide sees on horisontaalsed slaidid klassiga slide.

1
<div id="fullpage">
2
    <div class="section">First section</div>
3
    <div class="section">Second section</div>
4
    <div class="section">
5
        <div class="slide">Slide 1</div>
6
        <div class="slide">Slide 2</div>
7
    </div>
8
</div>

Initsialiseerimine käib vanilla JS-is, failis fullpage-init.js, mis laaditakse pärast teeki:

1
document.addEventListener('DOMContentLoaded', function () {
2
    new fullpage('#fullpage', {
3
        // Navigation
4
        anchors: ['intro', 'features', 'pricing', 'contact'],
5
        navigation: true,
6
        navigationPosition: 'right',
7
 
8
        // Scrolling
9
        scrollingSpeed: 700,
10
        autoScrolling: true,
11
        fitToSection: true,
12
        scrollBar: false,
13
        easing: 'easeInOutCubic',
14
 
15
        // Responsive
16
        responsiveWidth: 1024,
17
        responsiveHeight: 768,
18
 
19
        // Design
20
        verticalCentered: true,
21
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f5f5f5'],
22
        paddingTop: '2em',
23
 
24
        // Performance
25
        lazyLoading: true,
26
        observer: true
27
    });
28
});

Peamised valikud, mida tasub juba esimesest käivitusest teadlikult seadistada:

• anchors, ankrud otseviitade jaoks sektsioonidele (site.com/#features). Ilma nendeta URL kerimisel ei muutu ja konkreetsele plokile ei saa linkida.
• navigation, punktid paremal. Kasutaja näeb kohe, mitu sektsiooni on ja kus ta asub.
• scrollingSpeed, animatsiooni kiirus millisekundites. 700 on kuldne kesktee: ei tõmble ega veni.
• responsiveWidth ja responsiveHeight, määratud suurusest väiksematel ekraanidel lülitub täisekraankerimine automaatselt välja. Vastasel juhul lõigatakse sisu tahvelarvutitel ja telefonidel ära.
• scrollBar, kerimisriba. false puhta täisekraaniefekti jaoks; true on mugav silumisel.

80+ valiku täielik nimekiri on ametlikus dokumentatsioonis.

Samm 3. Vertikaalne navigatsioon

Sisseehitatud navigatsioonipunktid lülitatakse sisse lipuga navigation: true. Kuid vaikimisi kujundus on minimaalne, hallid ringid paremal. Me sobitame need kujundusse CSS-iga:

1
/* Color and size of the navigation dots */
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
/* Tooltips on hover */
15
#fp-nav ul li .fp-tooltip {
16
    color: #333;
17
    font-size: 14px;
18
    font-family: inherit;
19
}

Kui sisseehitatud navigatsioon läheb teemaga vastuollu või ei renderdu, kirjutame käsitsi sidumise jQuery-ga. Allolev skript jälgib aktiivset klassi sektsioonidel ja tõstab esile vastava menüüelemendi:

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

Navigatsioonipaneeli kood ise, järjestamata loend viidetega ankrutele:

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>

Praktikas päästab see varuvariant, kui teema kirjutab üle fullPage.js selektorid või kasutab mittestandardset DOM-struktuuri. Kood läheb faili footer.php või wp_add_inline_script kaudu.

Samm 4. Videotaust ja taasesituse juhtimine

Video esimese sektsiooni taga on silmatorkav nüanss. Kuid ilma juhtimiseta jätkab see mängimist ka pärast sektsioonist lahkumist ja raiskab ressursse. See lahendatakse afterLoad tagasikutsega.

Esimese sektsiooni HTML koos videoga:

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>Heading over the video background</h1>
7
    </div>
8
</div>

Atribuut playsinline on iOS-i jaoks kohustuslik, ilma selleta avab Safari video täisekraanipleieris. Kombinatsioon loop muted data-autoplay annab sujuva taustataasesituse.

Juhtimine afterLoad kaudu fullPage.js konfiguratsioonis:

1
new fullpage('#fullpage', {
2
    // ...other options...
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
});

Tagasikutse käivitub, kui sisenete sektsiooni. Indeks 1 ehk esimene sektsioon käivitab video. Kõik teised peatavad selle. Mobiili protsessorit ja akut ei raisata.

Manuaalseks juhtimiseks lisage Esita/Peata nupp, selle töötleja vahetab ikooni ja kutsub välja video.play() / video.pause(). Kasutaja saab valiku ning täisekraani kerimise mehaanika ei purune.

Samm 5. Pikad plokid, scrollOverflow ja automaatne kõrgus

Kui sektsiooni sisu ei mahu ekraani kõrgusesse, lõigatakse alumine osa ära. Lubame scrollOverflow:

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

See valik lisab konkreetsele sektsioonile sisemise kerimisriba, teisi sektsioone see ei mõjuta. Enamikul juhtudel on sellest piisavalt.

Täpsemaks juhtimiseks paneme CSS-klassid otse sektsioonile:

1
<div class="section fp-normal-scroll fp-auto-height">
2
    <!-- Long content with free scrolling -->
3
</div>

fp-auto-height eemaldab „täpselt 100vh" piirangu, sektsiooni kõrguse määrab sisu. fp-normal-scroll keelab haakumisefekti, sektsioon kerib loomulikult. See kombinatsioon on ideaalne jaluste, pikkade tabelite ja muutuva plokikõrgusega lehtede jaoks.

Sellistes plokiredaktorites nagu King Composer lisatakse klassid rea seadetes:

Samm 6. fullPage.js stiilide valikuline keelamine

Vahel kirjutab teek saidi CSS-i üle, nihutab positsioneerimist, muudab polsterdust, sektsioonide laiust. Pole vaja fullPage.js-i tervenisti välja rebida: keelame ainult probleemsed stiilid.

Näide positsioneerimise lähtestamisest sektsioonidele 3 kuni 8:

1
/* Reset of fullPage.js styles for the selected sections */
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) tabab täpselt seda vahemikku. !important on siin õigustatud, fullPage.js seab stiilid reasiseseks ja neid saab üle kirjutada ainult sel moel. Kuid rakendage seda valikuliselt: üks !important üle terve lehe ja kaskaad muutub pudruks.

Valmis WordPressi teemad koos fullPage.js-iga

Kui sa ei soovi teeki olemasolevasse teemasse käsitsi integreerida, võta valmis stardipakett. Hetkel saadaval olevad starditeemad GitHubis:

• starter-fullpagejs, minimaalne stardipakett, hea lähtepunkt kohandatud märgendi jaoks
• wordpress-onepager, kerge teem üheleheküljeliste saitide jaoks (repositoorium pole saadaval, otsi harusid)
• derkodde_fullpagetheme, teem, mis toetab sektsioone ja slaide (repositoorium eemaldatud, kasuta seda kontseptsioonina)
• MyPortfolio, portfoolio, mis on ehitatud fullPage.js-ile
• dandelion, üheleheküljeline teem puhta disainiga

Kõik teemad on GPL-litsentsi all ja vajavad konkreetse projekti jaoks kohandamist. Kuid need annavad sulle valmis sektsioonistruktuuri ja fullPage.js-i põhilise integratsiooni, mis säästab pool päeva tööd.

Samuti on olemas ametlik arendaja WordPressi teem ja eespool mainitud pistikprogrammid Elementori, Gutenbergi ja Divi jaoks. Pistikprogrammid on tasulised, kuid need katavad 95% ülesannetest ilma ühegi koodireata.

Lühike video fullPage.js-i paigaldamisest ja seadistamisest WordPressis, see näitab selgelt integreerimisprotsessi ametliku Divi pistikprogrammi kaudu.

⁉️🤔 Korduma kippuvad küsimused

Kas fullPage.js on tasuta?

Jah, avatud lähtekoodiga projektide jaoks GPLv3 litsentsi alusel on see täiesti tasuta. Suletud äriliste saitide jaoks vajad ärilitsentsi. WordPressi pistikprogrammid Elementori, Gutenbergi ja Divi jaoks on eraldi tasulised tooted, alates $29 saidi kohta.

Kuidas on fullPage.js parem kui CSS Scroll Snap?

CSS Scroll Snap käitub brauserites erinevalt: Safaris sujuv, Chrome'is tõmblev, mobiilis viivitusega. fullPage.js annab igal pool sama käitumise. Lisaks on kohe olemas: URL-ankrud, brauseri ajalugu, horisontaalsed slaidid, sisemine kerimine sektsioonides ja 37 animatsioonivalikut. Pole vaja polüfille ega käsitsi toestamist.

Kuidas fullPage.js mobiilis keelata?

Seadistuses on valikud responsiveWidth: 1024 ja responsiveHeight: 768. Kui ekraani laius on alla 1024px või kõrgus alla 768px, keelab teek automaatselt snap-kerimise ja naaseb tavalise kerimise juurde. Mingeid täiendavaid userAgent kontrolle pole vaja.

Kas fullPage.js-i saab kasutada WooCommerce'iga?

Jah, kuid ettevaatlikult. Toote- ja ostukorvilehed ei tohiks olla täisekraanil, see rikub ostukogemuse. Lisa fullPage.js ainult esilehele või konkreetsetele sihtlehtedele WordPressi tingimuslike siltide abil: is_front_page() või is_page('landing').

Miks taustavideo iOS-is ei esita?

Safari iPhone'is ja iPadis nõuab <video> sildil atribuuti playsinline. Ilma selleta läheb video täisekraanipleierisse ega tööta taustana. Samuti veendu, et video on kodeeritud H.264 (MP4) formaadis, HEVC ei ole kõigis Apple'i seadmetes toetatud.

FullPage.js aastal 2026: käsitsi seadistamine või pistikprogramm

Kui sa ehitad sihtlehte, portfooliot või esitlussaiti, siis fullPage.js pakub visuaalset efekti, mida puhas CSS ei suuda saavutada. 35 000+ tähte GitHubis ja 2,5 miljonit paigaldust kuus kinnitavad, et teek on elus ja stabiilne.

Veebipoodide, blogide ja administreerimispaneelide jaoks ei ole see seda väärt. Täisekraaniline kerimine segab navigeerimist ja sisu tarbimist, kasutaja väsib sellest pärast 3 kuni 4 tõmmet.

Oma tee valimine: kui vajad täielikku kontrolli iga sektsiooni üle ja oled valmis koodi kirjutama, vali käsitsi laadimine wp_enqueue_script-i kaudu. Kui soovid sihtlehte visuaalselt Elementoris või Gutenbergis tunniga ehitada, võta ametlik pistikprogramm. Mõlemad lähenemised on praktikas tõestatud, mõlemad töötavad üllatusteta.

Oled sa fullPage.js-i oma projektides proovinud? Jaga oma kogemust kommentaarides ja me ehitame üles elava lahenduste nimekirja levinud integratsiooniprobleemide jaoks.