Le défilement plein écran en CSS pur est une vraie difficulté. scroll-snap se comporte différemment sous Chrome et Safari, il saccade sur mobile, et vous pouvez oublier l’historique du navigateur et les ancres d’URL. Les solutions jQuery exigent plus de 200 lignes de code et cassent encore dès que la hauteur d’écran varie.

fullPage.js gère cette tâche de A à Z. Une bibliothèque qui totalise plus de 35 000 étoiles sur son dépôt GitHub et 2,5 millions de téléchargements mensuels via le CDN jsDelivr vous offre un défilement section par section prévisible, des diapositives horizontales, du lazy loading et plus de 80 options clés en main. La version 4.0.41 (mars 2026) fonctionne en Vanilla JS, et jQuery n’est plus nécessaire.

Voici un guide pas à pas pour intégrer fullPage.js dans WordPress: du chargement via wp_enqueue_script jusqu’à un fond vidéo et la désactivation sélective des styles. Sans extension, avec un contrôle total sur chaque pixel.

💡 Aperçu rapide:

• Charger fullPage.js via wp_enqueue_script, un seul hook, aucune extension supplémentaire
• Configurer les sections, les ancres et la navigation pour qu’elles correspondent à la structure de la page
• Ajouter un fond vidéo qui se met automatiquement en pause quand vous quittez la section
• Résoudre le problème des blocs longs avec scrollOverflow et fp-auto-height
• Désactiver les styles de la bibliothèque de manière sélective, sans tout supprimer

Qu’est-ce que fullPage.js

fullPage.js est une bibliothèque JavaScript destinée aux sites avec un défilement vertical plein écran. La page est découpée en sections, chacune occupant exactement la hauteur de l’écran. Un scroll ou un toucher fait passer l’utilisateur d’une section à l’autre avec une animation fluide. À l’intérieur des sections se trouvent des diapositives horizontales.

La version actuelle est la 4.0.41 (mars 2026). La bibliothèque a été entièrement réécrite en Vanilla JS: l’abandon de jQuery a permis d’économiser environ 80 Ko. Tous les navigateurs modernes et les appareils mobiles sont pris en charge. IE11 fonctionne avec la version 3.x.

Pour WordPress, il existe des extensions officielles pour Elementor, Gutenberg et Divi. Ces extensions sont payantes, mais elles permettent de construire une page d’atterrissage visuellement, sans code. Si vous avez besoin d’un contrôle total, chargez la bibliothèque manuellement dans le thème.

Étape 1. Connecter fullPage.js à WordPress

La méthode correcte consiste à passer par wp_enqueue_script dans functions.php. Pas de <script> codé en dur dans le pied de page, pas d’insertion via wp_head.

Téléchargez fullpage.min.js et fullpage.min.css depuis le dépôt officiel ou chargez-les via un CDN. Pour la production, un fichier local est plus fiable, avec moins de dépendances externes et un chargement plus rapide.

Placez les fichiers dans un dossier du thème, par exemple /assets/fullpage/, et ajoutez ceci dans 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' );

Ce qui importe ici: is_front_page() limite le chargement à la page d’accueil uniquement, la bibliothèque ne pèse donc pas sur l’ensemble du site. Le quatrième paramètre true place le script dans le pied de page, et la page s’affiche sans délai. La version indiquée en troisième argument aide à réinitialiser le cache lors d’une mise à jour, de sorte que le navigateur récupère le nouveau fichier au lieu de l’ancien en cache.

Si un CDN vous convient mieux, remplacez get_template_directory_uri() par des liens directs depuis le réseau jsDelivr ou cdnjs. Indiquez explicitement la version dans l’URL ([email protected]), n’utilisez pas @latest: une mise à jour majeure peut casser le site sans prévenir.

Étape 2. Configuration de base

La structure HTML est simple: un conteneur avec id="fullpage" et des sections dotées de la classe section. À l’intérieur des sections se trouvent des diapositives horizontales avec 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’initialisation se fait en Vanilla JS, dans le fichier fullpage-init.js, qui est chargé après la bibliothèque:

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

Les options clés qu’il est pertinent de configurer délibérément dès le premier lancement:

• anchors, les ancres pour les liens directs vers les sections (site.com/#features). Sans elles, l’URL ne change pas au défilement et vous ne pouvez pas créer de lien vers un bloc spécifique.
• navigation, les points sur la droite. L’utilisateur voit immédiatement combien de sections il y a et où il se trouve.
• scrollingSpeed, la vitesse d’animation en ms. 700 est le juste milieu: ni saccadé, ni traînant.
• responsiveWidth et responsiveHeight, sur les écrans plus petits que les tailles définies, le défilement plein écran est automatiquement désactivé. Sinon, le contenu est tronqué sur les tablettes et les téléphones.
• scrollBar, la barre de défilement. false pour un effet plein écran épuré; true est pratique pour le débogage.

La liste complète des plus de 80 options se trouve dans la documentation officielle.

Étape 3. Navigation verticale

Les points de navigation intégrés sont activés par le flag navigation: true. Mais le style par défaut est minimaliste, de simples cercles gris à droite. Nous les adaptons au design avec du 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
}

Si la navigation intégrée entre en conflit avec le thème ou ne s’affiche pas correctement, nous écrivons une liaison manuelle avec jQuery. Le script ci-dessous suit la classe active sur les sections et met en surbrillance l’élément de menu correspondant:

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

Le code du panneau de navigation lui-même, une liste non ordonnée avec des liens vers les ancres:

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>

En pratique, cette solution de repli vous sauve lorsque le thème surcharge les sélecteurs de fullPage.js ou utilise une structure DOM non standard. Le code se place dans footer.php ou via wp_add_inline_script.

Étape 4. Fond vidéo et contrôle de la lecture

Une vidéo en arrière-plan de la première section apporte une touche percutante. Mais sans contrôle, elle continue de jouer après que vous avez quitté la section et gaspille des ressources. Cela se résout avec le callback afterLoad.

Le HTML de la première section avec la vidéo:

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’attribut playsinline est obligatoire pour iOS, sans lui Safari ouvre la vidéo dans un lecteur plein écran. La combinaison loop muted data-autoplay assure une lecture en arrière-plan fluide.

Le contrôle via afterLoad dans la configuration de 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 fonction de rappel se déclenche lorsque vous entrez dans une section. L'index 1, la première section, lance la vidéo. Toute autre section la met en pause. Le processeur et la batterie du mobile ne sont pas sollicités inutilement.

Pour un contrôle manuel, ajoutez un bouton Lecture/Pause: le gestionnaire bascule l'icône et appelle video.play() / video.pause(). L'utilisateur a le choix, et le mécanisme de défilement en plein écran n'est pas cassé.

Étape 5. Blocs longs, scrollOverflow et hauteur automatique

Lorsque le contenu d'une section ne tient pas dans la hauteur de l'écran, le bas est tronqué. Nous activons scrollOverflow:

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

L'option ajoute une barre de défilement interne à cette section spécifique, les autres sections ne sont pas affectées. Cela suffit dans la plupart des cas.

Pour un contrôle plus fin, nous plaçons des classes CSS directement sur la section:

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

fp-auto-height supprime la contrainte «exactement 100vh», la hauteur de la section est définie par le contenu. fp-normal-scroll désactive l'effet d'ancrage, la section défile naturellement. La combinaison est idéale pour les pieds de page, les longs tableaux et les pages avec des hauteurs de blocs variables.

Dans les éditeurs par blocs comme King Composer, les classes sont ajoutées dans les paramètres de la ligne:

Étape 6. Désactiver les styles de fullPage.js de manière sélective

Parfois, la bibliothèque écrase le CSS du site, décale le positionnement, modifie les espacements ou les largeurs des sections. Il n'est pas nécessaire de supprimer entièrement fullPage.js: nous désactivons uniquement les styles problématiques.

Un exemple de réinitialisation du positionnement pour les sections 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
}

Le sélecteur :nth-child(n+3):nth-child(-n+8) cible exactement la plage. !important est justifié ici, fullPage.js définit des styles en ligne, et vous ne pouvez les surcharger que de cette manière. Mais appliquez-le de façon sélective: un !important sur toute la page, et la cascade devient un chaos.

Thèmes WordPress prêts à l’emploi avec fullPage.js

Si vous ne souhaitez pas intégrer la bibliothèque manuellement dans un thème existant, prenez un starter prêt à l’emploi. Thèmes starter disponibles sur GitHub:

• starter-fullpagejs, un starter minimal, un bon point de départ pour un balisage personnalisé
• wordpress-onepager, un thème léger pour les sites one-page (dépôt indisponible, cherchez des forks)
• derkodde_fullpagetheme, un thème avec prise en charge des sections et des slides (dépôt supprimé, utilisez-le comme concept)
• MyPortfolio, un portfolio construit sur fullPage.js
• dandelion, un thème one-page au design épuré

Tous ces thèmes sont sous licence GPL et nécessitent une adaptation à un projet spécifique. Mais ils vous donnent une structure de sections prête et une intégration de base de fullPage.js, ce qui fait gagner une demi-journée de travail.

Il existe aussi un thème WordPress officiel du développeur et les extensions pour Elementor, Gutenberg et Divi mentionnées plus haut. Les extensions sont payantes, mais elles couvrent 95% des tâches sans écrire une seule ligne de code.

Une courte vidéo sur l’installation et la configuration de fullPage.js dans WordPress, elle montre clairement le processus d’intégration via l’extension officielle pour Divi.

⁉️🤔 Questions fréquentes

fullPage.js est-il gratuit?

Oui, pour les projets open source sous licence GPLv3, il est totalement gratuit. Pour les sites commerciaux fermés, vous avez besoin d’une licence commerciale. Les extensions WordPress pour Elementor, Gutenberg et Divi sont des produits payants distincts, à partir de 29 $ par site.

En quoi fullPage.js est-il meilleur que CSS Scroll Snap?

CSS Scroll Snap se comporte différemment selon les navigateurs: fluide dans Safari, saccadé dans Chrome, avec un temps de retard sur mobile. fullPage.js offre un comportement identique partout. Et en plus, de série: ancres d’URL, historique du navigateur, slides horizontaux, défilement interne dans les sections et 37 options d’animation. Sans polyfills ni bricolages manuels.

Comment désactiver fullPage.js sur mobile?

Les options responsiveWidth: 1024 et responsiveHeight: 768 dans la configuration. Quand la largeur de l’écran est inférieure à 1024px ou la hauteur inférieure à 768px, la bibliothèque désactive automatiquement le défilement par snap et revient à un défilement normal. Aucune vérification supplémentaire de userAgent n’est nécessaire.

Peut-on utiliser fullPage.js avec WooCommerce?

Oui, mais avec précaution. Les pages produit et panier ne doivent pas être en plein écran, cela casse l’expérience d’achat. Attachez fullPage.js uniquement à la page d’accueil ou à des pages d’atterrissage spécifiques via les balises conditionnelles WordPress: is_front_page() ou is_page('landing').

Pourquoi la vidéo d’arrière-plan ne se lance-t-elle pas sur iOS?

Safari sur iPhone et iPad exige l’attribut playsinline sur la balise <video>. Sans cela, la vidéo passe dans un lecteur plein écran et ne fonctionne pas comme arrière-plan. Assurez-vous également que la vidéo est encodée en H.264 (MP4), le HEVC n’étant pas pris en charge sur tous les appareils Apple.

FullPage.js en 2026: configuration manuelle ou extension

Si vous construisez une page d’atterrissage, un portfolio ou un site de présentation, fullPage.js apporte un effet visuel que le CSS pur ne peut pas produire. Plus de 35 000 étoiles sur GitHub et 2,5 millions d’installations par mois confirment que la bibliothèque est vivante et stable.

Pour les boutiques en ligne, les blogs et les panneaux d’administration, cela n’en vaut pas la peine. Le défilement plein écran gêne la navigation et la consommation de contenu, l’utilisateur s’en lasse après 3 ou 4 passages.

Choisissez votre voie: si vous avez besoin d’un contrôle total sur chaque section et que vous êtes prêt à coder, optez pour le chargement manuel via wp_enqueue_script. Si vous voulez construire une page d’atterrissage visuellement dans Elementor ou Gutenberg en une heure, prenez l’extension officielle. Les deux approches ont fait leurs preuves en pratique, les deux fonctionnent sans surprise.

Avez-vous essayé fullPage.js dans vos propres projets? Partagez votre expérience dans les commentaires, et nous construirons ensemble une liste vivante de solutions pour les problèmes d’intégration courants.