Helskjermsrulling i ren CSS er et mareritt. scroll-snap oppfører seg forskjellig i Chrome og Safari, den hakker på mobil, og du kan glemme nettleserhistorikk og URL-ankre. jQuery-løsninger trenger 200+ linjer med kode og knekker fortsatt på varierende skjermhøyder.

fullPage.js håndterer denne oppgaven fullstendig. Et bibliotek med mer enn 35 000 stjerner på sitt GitHub-repositorium og 2,5 millioner månedlige nedlastinger via jsDelivr CDN gir forutsigbar seksjon-for-seksjon-rulling, horisontale slides, lat lasting og 80+ alternativer rett ut av boksen. Versjon 4.0.41 (mars 2026) kjører på Vanilla JS, og jQuery er ikke lenger nødvendig.

Nedenfor finner du en trinnvis guide til å integrere fullPage.js i WordPress: fra å laste det via wp_enqueue_script til en videobakgrunn og selektiv deaktivering av stiler. Ingen utvidelser, med full kontroll over hver piksel.

💡 Rask oversikt:

• Last fullPage.js via wp_enqueue_script, én hook, ingen ekstra utvidelser
• Konfigurer seksjoner, ankere og navigasjon for å matche sidestrukturen
• Legg til en videobakgrunn som pauses automatisk når du forlater seksjonen
• Løs problemet med lange blokker med scrollOverflow og fp-auto-height
• Deaktiver bibliotekets stiler selektivt, uten å rive det helt ut

Hva fullPage.js er

fullPage.js er et JavaScript-bibliotek for nettsteder med vertikal helskjermsrulling. Siden er delt opp i seksjoner, der hver tar nøyaktig høyden på skjermen. En rulling eller et trykk flytter brukeren mellom seksjoner med en jevn animasjon. Inne i seksjoner finnes det horisontale slides.

Den nåværende versjonen er 4.0.41 (mars 2026). Biblioteket har blitt fullstendig omskrevet i Vanilla JS: å droppe jQuery sparte omtrent 80 KB. Alle moderne nettlesere og mobile enheter støttes. IE11 fungerer på 3.x-versjonen.

For WordPress finnes det offisielle utvidelser for Elementor, Gutenberg og Divi. Utvidelsene er betalte, men de bygger en landingsside visuelt, uten kode. Hvis du trenger full kontroll, laster du biblioteket inn i temaet manuelt.

Trinn 1. Koble fullPage.js til WordPress

Den riktige måten er via wp_enqueue_script i functions.php. Ingen hardkodet <script> i footeren, ingen innsettinger gjennom wp_head.

Last ned fullpage.min.js og fullpage.min.css fra det offisielle repositoriet eller last dem via en CDN. For produksjon er en lokal fil mer pålitelig, færre eksterne avhengigheter og raskere lasting.

Legg filene i en temamappe, for eksempel /assets/fullpage/, og legg til dette i functions.php:

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

Det som betyr noe her: is_front_page() begrenser innlastingen til kun forsiden, slik at biblioteket ikke ligger på hele nettstedet. Den fjerde parameteren true plasserer skriptet i footeren, og siden rendres uten forsinkelse. Versjonen i det tredje argumentet hjelper med å nullstille hurtigbufferen ved oppdatering, slik at nettleseren henter den nye filen i stedet for den gamle hurtigbufrede.

Hvis et CDN er mer praktisk, erstatt get_template_directory_uri() med direkte lenker fra jsDelivr-nettverket eller cdnjs. Fest versjonen i URL-en eksplisitt ([email protected]), ikke bruk @latest, en større versjonsoppdatering kan knekke nettstedet uten forvarsel.

Steg 2. Grunnleggende konfigurasjon

HTML-strukturen er enkel: en wrapper med id="fullpage" og seksjoner med klassen section. Inne i seksjoner er det horisontale slides med klassen 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>

Initialisering skjer i Vanilla JS, i filen fullpage-init.js, som lastes etter biblioteket:

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

Nøkkelalternativene det er verdt å konfigurere bevisst fra første kjøring:

• anchors, ankere for direkte lenker til seksjoner (site.com/#features). Uten dem endres ikke URL-en ved rulling, og du kan ikke lenke til en spesifikk blokk.
• navigation, prikker til høyre. Brukeren ser umiddelbart hvor mange seksjoner det er og hvor de befinner seg.
• scrollingSpeed, animasjonshastighet i ms. 700 er den gylne middelvei: ikke rykkete og ikke utdratt.
• responsiveWidth og responsiveHeight, på skjermer mindre enn de angitte størrelsene deaktiveres fullskjermsrulling automatisk. Ellers kuttes innhold på nettbrett og telefoner.
• scrollBar, rullefeltet. false for en ren fullside-effekt; true er nyttig for feilsøking.

Den fullstendige listen med 80+ alternativer finnes i den offisielle dokumentasjonen.

Steg 3. Vertikal navigasjon

De innebygde navigasjonsprikkene aktiveres med flagget navigation: true. Men standardstilen er minimal, grå sirkler til høyre. Vi tilpasser dem til designet med CSS:

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
}

Hvis den innebygde navigasjonen kommer i konflikt med temaet eller ikke rendres, skriver vi en manuell binding med jQuery. Skriptet nedenfor sporer den aktive klassen på seksjonene og uthever det tilsvarende menyelementet:

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

Selve navigasjonspanelkoden, en uordnet liste med lenker til ankrene:

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>

I praksis redder denne fallbacken deg når temaet overstyrer fullPage.js-selektorer eller bruker en ikke-standard DOM-struktur. Koden legges i footer.php eller via wp_add_inline_script.

Steg 4. Videobakgrunn og avspillingskontroll

En video bak den første seksjonen er et slående grep. Men uten kontroll fortsetter den å spille etter at du forlater seksjonen og sløser med ressurser. Det løses med afterLoad-callbacken.

HTML-en for den første seksjonen med video:

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>

Attributtet playsinline er obligatorisk for iOS, uten det åpner Safari videoen i en fullskjermspiller. Kombinasjonen loop muted data-autoplay gir sømløs bakgrunnsavspilling.

Kontroll via afterLoad i fullPage.js-konfigurasjonen:

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

Tilbakekallet fyres når du går inn i en seksjon. Indeks 1, den første seksjonen, starter videoen. Alle andre setter den på pause. Prosessor og batteri på mobil blir ikke sløst bort.

For manuell kontroll legger du til en Spill av/Pause-knapp, handleren veksler ikonet og kaller video.play() / video.pause(). Brukeren får et valg, og fullskjerms-rullemekanikken ryker ikke.

Trinn 5. Lange blokker, scrollOverflow og automatisk høyde

Når innholdet i en seksjon ikke får plass i skjermhøyden, blir bunnen kuttet. Vi aktiverer scrollOverflow:

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

Valget legger til en intern rullefelt for akkurat den seksjonen, de andre seksjonene påvirkes ikke. Dette er nok i de fleste tilfeller.

For finere kontroll setter vi CSS-klasser direkte på seksjonen:

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

fp-auto-height fjerner begrensningen «nøyaktig 100vh», seksjonshøyden defineres av innholdet. fp-normal-scroll deaktiverer snap-effekten, seksjonen ruller naturlig. Kombinasjonen er ideell for bunntekster, lange tabeller og sider med variabel blokkhøyde.

I blokkredigerere som King Composer legges klassene til i radinnstillingene:

Trinn 6. Deaktivere fullPage.js-stiler selektivt

Noen ganger overstyrer biblioteket nettstedets CSS, forskyver plassering, endrer padding, seksjonsbredder. Det er ikke nødvendig å rive ut hele fullPage.js: vi deaktiverer bare de problematiske stilene.

Et eksempel på tilbakestilling av posisjonering for seksjon 3 til 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
}

Selektoren :nth-child(n+3):nth-child(-n+8) treffer nøyaktig intervallet. !important er berettiget her, fullPage.js setter stiler inline, og du kan bare overstyre dem på denne måten. Men bruk det selektivt: én !important over hele siden, og kaskaden blir til grøt.

Ferdige WordPress-temaer med fullPage.js

Hvis du ikke vil integrere biblioteket manuelt i et eksisterende tema, kan du ta et ferdig utgangspunkt. Aktuelle starttemaer på GitHub:

• starter-fullpagejs, et minimalt starttema, et godt utgangspunkt for egendefinert markup
• wordpress-onepager, et lettvektstema for en-siders nettsteder (repository utilgjengelig, se etter forks)
• derkodde_fullpagetheme, et tema med støtte for seksjoner og slides (repository fjernet, bruk det som et konsept)
• MyPortfolio, en portefølje bygget på fullPage.js
• dandelion, et en-siders tema med et rent design

Alle temaene er under GPL og må tilpasses et konkret prosjekt. Men de gir deg en ferdig seksjonsstruktur og grunnleggende fullPage.js-integrasjon, noe som sparer en halv dags arbeid.

Det finnes også et offisielt WordPress-tema fra utvikleren og pluginene for Elementor, Gutenberg og Divi som er nevnt ovenfor. Pluginene er betalte, men de dekker 95% av oppgavene uten en eneste linje kode.

En kort video om installasjon og konfigurering av fullPage.js i WordPress, den viser tydelig integrasjonsprosessen via den offisielle pluginen for Divi.

⁉️🤔 Ofte stilte spørsmål

Er fullPage.js gratis?

Ja, for prosjekter med åpen kildekode under GPLv3-lisensen er det helt gratis. For lukkede kommersielle nettsteder trenger du en kommersiell lisens. WordPress-pluginene for Elementor, Gutenberg og Divi er separate betalte produkter, fra $29 per nettsted.

Hvordan er fullPage.js bedre enn CSS Scroll Snap?

CSS Scroll Snap oppfører seg forskjellig på tvers av nettlesere: jevnt i Safari, hakkete i Chrome, forsinket på mobil. fullPage.js gir samme oppførsel overalt. Pluss ut av boksen: URL-ankre, nettleserhistorikk, horisontale slides, intern rulling i seksjoner og 37 animasjonsalternativer. Ingen polyfills og ingen manuelle nødløsninger.

Hvordan deaktiverer du fullPage.js på mobil?

Alternativene responsiveWidth: 1024 og responsiveHeight: 768 i konfigurasjonen. Når skjermbredden er under 1024px eller høyden under 768px, deaktiverer biblioteket automatisk snap-rulling og går tilbake til normal rulling. Ingen ekstra userAgent-sjekker er nødvendig.

Kan du bruke fullPage.js med WooCommerce?

Ja, men vær forsiktig. Produkt- og handlekurvsider bør ikke være fullskjerm, det ødelegger handleopplevelsen. Knytt fullPage.js kun til forsiden eller spesifikke landingssider via WordPress' betingede tagger: is_front_page() eller is_page('landing').

Hvorfor spilles ikke bakgrunnsvideoen av på iOS?

Safari på iPhone og iPad krever playsinline-attributtet på <video>-taggen. Uten den går videoen inn i en fullskjermspiller og fungerer ikke som bakgrunn. Sørg også for at videoen er kodet i H.264 (MP4), HEVC støttes ikke på alle Apple-enheter.

FullPage.js i 2026: manuelt oppsett eller en plugin

Hvis du bygger en landingsside, en portefølje eller et presentasjonsnettsted, leverer fullPage.js en visuell effekt som ren CSS ikke kan oppnå. 35 000+ stjerner på GitHub og 2,5 millioner installasjoner i måneden bekrefter at biblioteket er levende og stabilt.

For nettbutikker, blogger og adminpaneler er det ikke verdt det. Fullskjermsrulling kommer i veien for navigasjon og innholdskonsum, brukeren blir lei av det etter 3 til 4 sveip.

Velg din vei: hvis du trenger full kontroll over hver seksjon og er klar til å skrive kode, gå for manuell lasting via wp_enqueue_script. Hvis du vil bygge en landingsside visuelt i Elementor eller Gutenberg på en time, ta den offisielle pluginen. Begge tilnærmingene er utprøvd i praksis, begge fungerer uten overraskelser.

Har du prøvd fullPage.js i dine egne prosjekter? Del erfaringene dine i kommentarfeltet, så bygger vi en levende liste over løsninger for vanlige integrasjonsproblemer.