Koko näytön vieritys pelkällä CSS:llä on tuskaa. scroll-snap käyttäytyy eri tavoin Chromessa ja Safarissa, se pätkii mobiilissa, ja selainhistorian ja URL-ankkurien käytön voit unohtaa. jQuery-ratkaisut vaativat yli 200 riviä koodia ja hajoavat silti vaihtelevilla näyttökorkeuksilla.

fullPage.js hoitaa tämän tehtävän kokonaisuudessaan. Kirjasto, jolla on yli 35 000 tähteä GitHub-repossa ja 2,5 miljoonaa kuukausittaista latausta jsDelivr CDN:n kautta, tarjoaa ennakoitavan osioittaisen vierityksen, vaakasuuntaiset diat, laiskan latauksen ja yli 80 asetusta valmiina. Versio 4.0.41 (maaliskuu 2026) toimii Vanilla JS:llä, eikä jQuerya enää tarvita.

Alla on vaiheittainen opas fullPage.js:n integroimiseen WordPressiin: sen lataamisesta wp_enqueue_script-funktiolla aina videotaustaan ja tyylien valikoivaan poistamiseen. Ilman lisäosia, täydellä pikselitason hallinnalla.

💡 Pikakatsaus:

• Lataa fullPage.js wp_enqueue_script-funktiolla, yksi koukku, ei ylimääräisiä lisäosia
• Määritä osiot, ankkurit ja navigaatio vastaamaan sivun rakennetta
• Lisää videotausta, joka pysähtyy automaattisesti, kun poistut osiosta
• Ratkaise pitkien lohkojen ongelma scrollOverflow- ja fp-auto-height-toiminnoilla
• Poista kirjaston tyylit valikoivasti repimättä sitä kokonaan irti

Mikä fullPage.js on

fullPage.js on JavaScript-kirjasto sivuille, joissa on koko näytön pystysuuntainen vieritys. Sivu on pilkottu osioihin, joista jokainen vie tarkalleen näytön korkeuden. Vieritys tai kosketus siirtää käyttäjän osioiden välillä sulavalla animaatiolla. Osioiden sisällä on vaakasuuntaisia dioja.

Nykyinen versio on 4.0.41 (maaliskuu 2026). Kirjasto on kirjoitettu kokonaan uusiksi Vanilla JS:llä: jQueryn pudottaminen säästi noin 80 kt. Kaikkia moderneja selaimia ja mobiililaitteita tuetaan. IE11 toimii 3.x-versiolla.

WordPressille on olemassa viralliset lisäosat Elementorille, Gutenbergille ja Diville. Lisäosat ovat maksullisia, mutta niillä rakennat laskeutumissivun visuaalisesti ilman koodia. Jos tarvitset täyden hallinnan, lataa kirjasto teemaan manuaalisesti.

Vaihe 1. fullPage.js:n liittäminen WordPressiin

Oikea tapa on wp_enqueue_script-funktiolla functions.php-tiedostossa. Ei kovakoodattua <script>-tagia footeriin, ei lisäyksiä wp_head-koukun kautta.

Lataa fullpage.min.js ja fullpage.min.css virallisesta repossa tai hae ne CDN:n kautta. Tuotannossa paikallinen tiedosto on luotettavampi, vähemmän ulkoisia riippuvuuksia ja nopeampi lataus.

Laita tiedostot teemakansioon, esimerkiksi /assets/fullpage/, ja lisää tämä functions.php-tiedostoon:

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

Tässä ratkaisevaa: is_front_page() rajaa latauksen vain etusivulle, joten kirjasto ei istu koko sivuston päällä. Neljäs parametri true sijoittaa skriptin footeriin, ja sivu renderöityy viiveettä. Kolmannen argumentin versio auttaa nollaamaan välimuistin päivityksen yhteydessä, jolloin selain hakee uuden tiedoston vanhan välimuistissa olevan sijaan.

Jos CDN on kätevämpi, korvaa get_template_directory_uri() suorilla linkeillä jsDelivr-verkostosta tai cdnjs-palvelusta. Kiinnitä versio URL-osoitteeseen eksplisiittisesti ([email protected]), älä käytä @latest-tunnistetta, sillä pääversion päivitys voi rikkoa sivuston varoittamatta.

Vaihe 2. Peruskonfiguraatio

HTML-rakenne on yksinkertainen: kääre, jolla on id="fullpage", ja osiot, joilla on luokka section. Osioiden sisällä on vaakasuuntaisia dioja luokalla 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>

Alustus tehdään Vanilla JS:llä tiedostossa fullpage-init.js, joka ladataan kirjaston jälkeen:

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

Keskeiset asetukset, jotka kannattaa konfiguroida harkiten jo ensimmäisestä ajosta lähtien:

• anchors, ankkurit suoria linkkejä varten osioihin (site.com/#features). Ilman niitä URL ei muutu vieritettäessä, eikä tiettyyn lohkoon voi linkittää.
• navigation, pisteet oikealla. Käyttäjä näkee heti, montako osiota on ja missä kohtaa hän on.
• scrollingSpeed, animaation nopeus millisekunneissa. 700 on kultainen keskitie: ei nykivä eikä venytetty.
• responsiveWidth ja responsiveHeight, asetettuja kokoja pienemmillä näytöillä koko ruudun vieritys poistetaan automaattisesti käytöstä. Muuten sisältö leikkautuu tableteilla ja puhelimilla.
• scrollBar, vierityspalkki. false antaa puhtaan koko ruudun efektin; true on kätevä debuggaamiseen.

Täydellinen lista yli 80 asetuksesta löytyy virallisesta dokumentaatiosta.

Vaihe 3. Pystysuuntainen navigaatio

Sisäänrakennetut navigaatiopisteet otetaan käyttöön lipulla navigation: true. Oletustyylitys on kuitenkin minimaalinen, harmaat ympyrät oikealla. Sovitamme ne designiin CSS:llä:

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
}

Jos sisäänrakennettu navigaatio on ristiriidassa teeman kanssa tai ei renderöidy, kirjoitamme manuaalisen sidoksen jQuerylla. Alla oleva skripti seuraa aktiivista luokkaa osioissa ja korostaa vastaavan valikkokohdan:

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

Itse navigaatiopaneelin koodi, järjestämätön lista ankkureihin osoittavine linkkeineen:

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>

Käytännössä tämä vararatkaisu pelastaa, kun teema ylikirjoittaa fullPage.js-valitsimet tai käyttää epästandardia DOM-rakennetta. Koodi lisätään footer.php-tiedostoon tai wp_add_inline_script-funktion kautta.

Vaihe 4. Videotausta ja toiston hallinta

Video ensimmäisen osion taustalla on näyttävä yksityiskohta. Ilman hallintaa se kuitenkin jatkaa toistoa osiosta poistumisen jälkeen ja tuhlaa resursseja. Tämä ratkaistaan afterLoad-takaisinkutsulla.

Ensimmäisen osion HTML videon kanssa:

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>

playsinline-attribuutti on pakollinen iOS:lle, ilman sitä Safari avaa videon koko näytön soittimessa. Yhdistelmä loop muted data-autoplay antaa saumattoman taustatoiston.

Hallinta afterLoad-takaisinkutsun kautta fullPage.js-konfiguraatiossa:

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

Takaisinkutsu laukeaa, kun siirryt osioon. Indeksi 1, eli ensimmäinen osio, käynnistää videon. Mikä tahansa muu pysäyttää sen. Mobiililaitteen prosessoria ja akkua ei tuhlata.

Manuaalista ohjausta varten lisää Play/Pause-painike, jonka käsittelijä vaihtaa kuvaketta ja kutsuu video.play() / video.pause(). Käyttäjä saa valinnanmahdollisuuden, eivätkä koko näytön vieritysmekaniikat hajoa.

Vaihe 5. Pitkät lohkot, scrollOverflow ja automaattinen korkeus

Kun osion sisältö ei mahdu näytön korkeuteen, alaosa leikkautuu pois. Otamme käyttöön scrollOverflow-asetuksen:

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

Tämä asetus lisää sisemmän vierityspalkin vain kyseiseen osioon, muihin osioihin se ei vaikuta. Tämä riittää useimmissa tapauksissa.

Tarkempaa hallintaa varten laitamme CSS-luokkia suoraan osiolle:

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

fp-auto-height poistaa "tasan 100vh"-rajoitteen, jolloin osion korkeus määräytyy sisällön mukaan. fp-normal-scroll poistaa napsahdusefektin käytöstä, jolloin osio vierii luonnollisesti. Yhdistelmä on ihanteellinen alatunnisteisiin, pitkiin taulukoihin ja sivuihin, joissa lohkojen korkeus vaihtelee.

Lohkoeditorissa, kuten King Composerissa, luokat lisätään rivin asetuksissa:

Vaihe 6. fullPage.js-tyylien poistaminen valikoidusti

Joskus kirjasto ohittaa sivuston CSS:n, siirtää asemointia, muuttaa täytettä tai osioiden leveyksiä. Koko fullPage.js-kirjastoa ei tarvitse repiä irti: poistamme käytöstä vain ongelmalliset tyylit.

Esimerkki asemoinnin nollaamisesta osioille 3-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
}

Valitsin :nth-child(n+3):nth-child(-n+8) osuu juuri tälle välille. !important on tässä perusteltu, sillä fullPage.js asettaa tyylejä inline-muodossa, ja voit ohittaa ne vain tällä tavalla. Käytä sitä kuitenkin valikoidusti: yksi !important koko sivun laajuisesti, ja kaskadi muuttuu puuroksi.

Valmiit WordPress-teemat fullPage.js:llä

Jos et halua integroida kirjastoa olemassa olevaan teemaan käsin, ota valmis pohja. Ajankohtaisia aloitusteemoja GitHubissa:

• starter-fullpagejs, minimaalinen aloituspohja, hyvä lähtökohta omalle merkinnälle
• wordpress-onepager, kevyt teema yhden sivun sivustoille (repoa ei ole saatavilla, etsi forkkeja)
• derkodde_fullpagetheme, teema, jossa on tuki osioille ja dioille (repo poistettu, käytä konseptina)
• MyPortfolio, fullPage.js:llä rakennettu portfolio
• dandelion, yhden sivun teema siistillä ulkoasulla

Kaikki teemat ovat GPL-lisenssillä ja vaativat sovittamista omaan projektiin. Ne antavat kuitenkin valmiin osiorakenteen ja fullPage.js-perusintegraation, mikä säästää puolen päivän työn.

Saatavilla on myös kehittäjän virallinen WordPress-teema sekä aiemmin mainitut lisäosat Elementorille, Gutenbergille ja Diville. Lisäosat ovat maksullisia, mutta ne kattavat 95% tehtävistä ilman yhtäkään koodiriviä.

Lyhyt video fullPage.js:n asennuksesta ja määrityksestä WordPressissä, se näyttää selkeästi integrointiprosessin Divin virallisen lisäosan kautta.

⁉️🤔 Usein kysytyt kysymykset

Onko fullPage.js ilmainen?

Kyllä, avoimen lähdekoodin projekteille GPLv3 -lisenssillä se on täysin ilmainen. Suljetuille kaupallisille sivustoille tarvitset kaupallisen lisenssin. WordPress-lisäosat Elementorille, Gutenbergille ja Diville ovat erillisiä maksullisia tuotteita, alkaen 29 $ per sivusto.

Miten fullPage.js on parempi kuin CSS Scroll Snap?

CSS Scroll Snap käyttäytyy eri selaimissa eri tavoin: sulavaa Safarissa, nykivää Chromessa, viivästynyttä mobiilissa. fullPage.js antaa saman toiminnan kaikkialla. Lisäksi suoraan paketista: URL-ankkurit, selainhistoria, vaakasuuntaiset diat, sisäinen vieritys osioissa ja 37 animaatiovaihtoehtoa. Ei polyfillejä eikä käsityönä tehtäviä virityksiä.

Miten fullPage.js otetaan pois käytöstä mobiilissa?

Asetuksissa responsiveWidth: 1024 ja responsiveHeight: 768. Kun näytön leveys on alle 1024px tai korkeus alle 768px, kirjasto poistaa automaattisesti napsautusvierityksen ja palaa normaaliin vieritykseen. Mitään ylimääräisiä userAgent-tarkistuksia ei tarvita.

Voiko fullPage.js:ää käyttää WooCommercen kanssa?

Kyllä, mutta varovasti. Tuote- ja ostoskorisivut eivät saisi olla koko näytön kokoisia, se rikkoo ostokokemuksen. Kiinnitä fullPage.js vain etusivulle tai tietyille laskeutumissivuille WordPressin ehdollisilla tageilla: is_front_page() tai is_page('landing').

Miksi taustavideo ei toistu iOS:llä?

iPhonen ja iPadin Safari vaatii playsinline-attribuutin <video>-tagille. Ilman sitä video menee koko näytön soittimeen eikä toimi taustana. Varmista myös, että video on koodattu H.264-muodossa (MP4), HEVC:tä ei tueta kaikissa Applen laitteissa.

FullPage.js vuonna 2026: manuaalinen asennus vai lisäosa

Jos rakennat laskeutumissivua, portfoliota tai esittelysivustoa, fullPage.js tuottaa visuaalisen efektin, johon pelkkä CSS ei pysty. Yli 35 000 tähteä GitHubissa ja 2,5 miljoonaa asennusta kuukaudessa vahvistavat, että kirjasto on elinvoimainen ja vakaa.

Verkkokaupoille, blogeille ja hallintapaneeleille se ei ole vaivan arvoinen. Koko näytön vieritys haittaa navigointia ja sisällön kuluttamista, käyttäjä väsyy siihen 3-4 pyyhkäisyn jälkeen.

Polun valinta: jos tarvitset täyden hallinnan jokaiseen osioon ja olet valmis kirjoittamaan koodia, valitse manuaalinen lataus wp_enqueue_script-funktiolla. Jos haluat rakentaa laskeutumissivun visuaalisesti Elementorilla tai Gutenbergilla tunnissa, ota virallinen lisäosa. Molemmat lähestymistavat on testattu käytännössä, molemmat toimivat ilman yllätyksiä.

Oletko kokeillut fullPage.js:ää omissa projekteissasi? Jaa kokemuksesi kommenteissa, niin rakennamme elävän listan ratkaisuista yleisiin integrointiongelmiin.