Lo scrolling a schermo intero in puro CSS è un problema. scroll-snap si comporta in modo diverso su Chrome e Safari, scatta sui dispositivi mobili e puoi scordarti la cronologia del browser e le ancore negli URL. Le soluzioni jQuery richiedono oltre 200 righe di codice e si rompono comunque con altezze dello schermo variabili.

fullPage.js gestisce questo compito in modo completo. Una libreria con più di 35.000 stelle sul suo repository GitHub e 2,5 milioni di download mensili tramite la CDN jsDelivr offre uno scorrimento prevedibile sezione per sezione, slide orizzontali, lazy loading e oltre 80 opzioni già pronte. La versione 4.0.41 (marzo 2026) gira in Vanilla JS e jQuery non è più necessario.

Ecco una guida passo passo per integrare fullPage.js in WordPress: dal caricamento tramite wp_enqueue_script fino a uno sfondo video e alla disattivazione selettiva degli stili. Nessun plugin, con il pieno controllo su ogni pixel.

💡 Panoramica rapida:

• Carica fullPage.js via wp_enqueue_script, un hook, nessun plugin aggiuntivo
• Configura sezioni, ancore e navigazione per adattarli alla struttura della pagina
• Aggiungi uno sfondo video che si mette in pausa automaticamente quando lasci la sezione
• Risolvi il problema dei blocchi lunghi con scrollOverflow e fp-auto-height
• Disattiva gli stili della libreria in modo selettivo, senza rimuoverla del tutto

Cos'è fullPage.js

fullPage.js è una libreria JavaScript per siti con scorrimento verticale a schermo intero. La pagina è suddivisa in sezioni, ciascuna delle quali occupa esattamente l'altezza dello schermo. Uno scroll o un tocco sposta l'utente tra le sezioni con un'animazione fluida. All'interno delle sezioni ci sono slide orizzontali.

La versione attuale è la 4.0.41 (marzo 2026). La libreria è stata completamente riscritta in Vanilla JS: l'abbandono di jQuery ha fatto risparmiare circa 80 KB. Sono supportati tutti i browser moderni e i dispositivi mobili. IE11 funziona con la versione 3.x.

Per WordPress esistono plugin ufficiali per Elementor, Gutenberg e Divi. I plugin sono a pagamento, ma permettono di costruire una landing page in modo visuale, senza codice. Se hai bisogno del pieno controllo, carica la libreria nel tema manualmente.

Passo 1. Collegare fullPage.js a WordPress

Il modo corretto è tramite wp_enqueue_script nel file functions.php. Niente <script> inseriti a mano nel footer, niente inserimenti tramite wp_head.

Scarica fullpage.min.js e fullpage.min.css dal repository ufficiale oppure caricali via CDN. Per la produzione un file in locale è più affidabile, meno dipendenze esterne e caricamento più veloce.

Inserisci i file in una cartella del tema, per esempio /assets/fullpage/, e aggiungi questo codice a 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' );

Ciò che conta qui: is_front_page() limita il caricamento alla sola home page, così la libreria non grava sull'intero sito. Il quarto parametro true posiziona lo script nel footer e la pagina viene renderizzata senza ritardi. La versione nel terzo argomento aiuta ad azzerare la cache a ogni aggiornamento, in modo che il browser carichi il nuovo file invece di quello vecchio in cache.

Se una CDN è più comoda, sostituisci get_template_directory_uri() con i link diretti dalla rete jsDelivr o da cdnjs. Fissa la versione nell'URL in modo esplicito ([email protected]), non usare @latest: un aggiornamento major di versione può rompere il sito senza preavviso.

Step 2. Configurazione di base

La struttura HTML è semplice: un wrapper con id="fullpage" e sezioni con la classe section. All'interno delle sezioni ci sono slide orizzontali con la classe 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>

L'inizializzazione è in Vanilla JS, nel file fullpage-init.js, che viene caricato dopo la libreria:

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

Le opzioni chiave che conviene configurare con attenzione fin dalla prima esecuzione:

• anchors, ancore per i link diretti alle sezioni (site.com/#features). Senza di esse l'URL non cambia durante lo scroll e non puoi linkare un blocco specifico.
• navigation, i pallini sulla destra. L'utente vede subito quante sezioni ci sono e in quale punto si trova.
• scrollingSpeed, velocità dell'animazione in ms. 700 è il giusto compromesso: né scattoso né troppo lento.
• responsiveWidth e responsiveHeight, su schermi più piccoli delle dimensioni impostate lo scorrimento a schermo intero viene disabilitato automaticamente. Altrimenti il contenuto viene tagliato su tablet e telefoni.
• scrollBar, la barra di scorrimento. false per un effetto full-page pulito; true è utile in fase di debug.

L'elenco completo con oltre 80 opzioni è nella documentazione ufficiale.

Step 3. Navigazione verticale

I pallini di navigazione integrati si attivano con il flag navigation: true. Ma lo stile predefinito è minimale, cerchi grigi sulla destra. Li adattiamo al design con i 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
}

Se la navigazione integrata entra in conflitto con il tema o non viene renderizzata, scriviamo un binding manuale con jQuery. Lo script qui sotto tiene traccia della classe attiva sulle sezioni ed evidenzia la voce di menu corrispondente:

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

Il codice del pannello di navigazione stesso, una lista non ordinata con link alle ancore:

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>

In pratica questo fallback ti salva quando il tema sovrascrive i selettori di fullPage.js o utilizza una struttura DOM non standard. Il codice va inserito in footer.php o tramite wp_add_inline_script.

Step 4. Sfondo video e controllo della riproduzione

Un video dietro la prima sezione è un tocco d'effetto. Ma senza controllo continua a essere riprodotto anche dopo aver lasciato la sezione e spreca risorse. Si risolve con la callback afterLoad.

L'HTML della prima sezione con il 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>

L'attributo playsinline è obbligatorio per iOS, senza di esso Safari apre il video in un player a schermo intero. La combinazione loop muted data-autoplay garantisce una riproduzione fluida in background.

Controllo tramite afterLoad nella configurazione di fullPage.js:

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

La callback si attiva quando entri in una sezione. L'indice 1, la prima sezione, avvia il video. Qualsiasi altra, lo mette in pausa. Processore e batteria su mobile non vengono sprecati.

Per il controllo manuale aggiungi un pulsante Play/Pause, il gestore alterna l'icona e chiama video.play() / video.pause(). L'utente ha una scelta, e la meccanica di scorrimento a schermo intero non si rompe.

Step 5. Blocchi lunghi, scrollOverflow e altezza automatica

Quando il contenuto di una sezione non rientra nell'altezza dello schermo, la parte inferiore viene tagliata. Attiviamo scrollOverflow:

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

L'opzione aggiunge una barra di scorrimento interna solo a quella sezione specifica, le altre sezioni non vengono toccate. Nella maggior parte dei casi questo basta.

Per un controllo più fine mettiamo classi CSS direttamente sulla sezione:

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

fp-auto-height rimuove il vincolo "esattamente 100vh", l'altezza della sezione è definita dal contenuto. fp-normal-scroll disabilita l'effetto snap, la sezione scorre in modo naturale. La combinazione è ideale per footer, tabelle lunghe e pagine con altezze di blocco variabili.

Negli editor a blocchi come King Composer le classi si aggiungono nelle impostazioni della riga:

Step 6. Disabilitare selettivamente gli stili di fullPage.js

A volte la libreria sovrascrive i CSS del sito, sposta il posizionamento, cambia i padding, le larghezze delle sezioni. Non serve eliminare del tutto fullPage.js: disabilitiamo solo gli stili che creano problemi.

Un esempio di reset del posizionamento per le sezioni dalla 3 alla 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
}

Il selettore :nth-child(n+3):nth-child(-n+8) centra esattamente l'intervallo. !important qui è giustificato, fullPage.js imposta stili inline, e puoi sovrascriverli solo in questo modo. Ma applicalo in modo selettivo: un !important su tutta la pagina, e la cascata diventa un caos.

Temi WordPress predefiniti con fullPage.js

Se non vuoi integrare la libreria manualmente in un tema esistente, prendi uno starter già pronto. Temi starter attualmente disponibili su GitHub:

• starter-fullpagejs, uno starter minimale, un buon punto di partenza per markup personalizzato
• wordpress-onepager, un tema leggero per siti one-page (repository non disponibile, cerca dei fork)
• derkodde_fullpagetheme, un tema con supporto per sezioni e slide (repository rimosso, usalo come riferimento)
• MyPortfolio, un portfolio costruito su fullPage.js
• dandelion, un tema one-page dal design pulito

Tutti i temi sono sotto licenza GPL e vanno adattati al progetto specifico. Ti danno però una struttura a sezioni già pronta e l'integrazione base di fullPage.js, il che fa risparmiare mezza giornata di lavoro.

Esiste anche un tema WordPress ufficiale dello sviluppatore e i plugin per Elementor, Gutenberg e Divi citati sopra. I plugin sono a pagamento, ma coprono il 95% delle attività senza scrivere una sola riga di codice.

Un breve video sull'installazione e configurazione di fullPage.js in WordPress, mostra chiaramente il processo di integrazione tramite il plugin ufficiale per Divi.

⁉️🤔 Domande frequenti

fullPage.js è gratuito?

Sì, per progetti open source sotto licenza GPLv3 è completamente gratuito. Per siti commerciali chiusi serve una licenza commerciale. I plugin WordPress per Elementor, Gutenberg e Divi sono prodotti a pagamento separati, a partire da $29 per sito.

In cosa fullPage.js è migliore di CSS Scroll Snap?

CSS Scroll Snap si comporta in modo diverso a seconda del browser: fluido su Safari, scattoso su Chrome, in ritardo su mobile. fullPage.js dà lo stesso comportamento ovunque. In più offre nativamente: ancore URL, cronologia del browser, slide orizzontali, scroll interno nelle sezioni e 37 opzioni di animazione. Niente polyfill e niente rattoppi manuali.

Come si disattiva fullPage.js su mobile?

Le opzioni responsiveWidth: 1024 e responsiveHeight: 768 nella configurazione. Quando la larghezza dello schermo è sotto i 1024px o l'altezza sotto i 768px, la libreria disattiva automaticamente lo snap scrolling e torna allo scorrimento normale. Non servono controlli aggiuntivi sullo userAgent.

Si può usare fullPage.js con WooCommerce?

Sì, ma con attenzione. Le pagine prodotto e carrello non devono essere a schermo intero, perché rompono l'esperienza d'acquisto. Collega fullPage.js solo alla home page o a landing page specifiche tramite i tag condizionali di WordPress: is_front_page() o is_page('landing').

Perché il video di sfondo non si avvia su iOS?

Safari su iPhone e iPad richiede l'attributo playsinline sul tag <video>. Senza, il video va in un player a schermo intero e non funziona come sfondo. Inoltre assicurati che il video sia codificato in H.264 (MP4), HEVC non è supportato su tutti i dispositivi Apple.

FullPage.js nel 2026: configurazione manuale o plugin

Se stai costruendo una landing page, un portfolio o un sito di presentazione, fullPage.js offre un effetto visivo che il puro CSS non può raggiungere. Oltre 35.000 stelle su GitHub e 2,5 milioni di installazioni al mese confermano che la libreria è viva e stabile.

Per negozi online, blog e pannelli di amministrazione, non ne vale la pena. Lo scorrimento a schermo intero ostacola la navigazione e il consumo dei contenuti, l'utente si stanca dopo 3 o 4 swipe.

Scegliere la strada: se hai bisogno del pieno controllo su ogni sezione e sei pronto a scrivere codice, vai con il caricamento manuale tramite wp_enqueue_script. Se vuoi costruire una landing page visivamente con Elementor o Gutenberg in un'ora, prendi il plugin ufficiale. Entrambi gli approcci sono collaudati nella pratica, entrambi funzionano senza sorprese.

Hai provato fullPage.js nei tuoi progetti? Condividi la tua esperienza nei commenti, e costruiremo insieme una lista viva di soluzioni per i problemi comuni di integrazione.