Les sites au design plat se lisent. Les sites avec parallaxe se retiennent. Même contenu, même mise en page, mais l’arrière-plan défile plus lentement que le premier plan, et la page gagne en profondeur, en respiration et en qualité cinématographique. L’utilisateur ne fait pas simplement défiler du texte, il parcourt une histoire.

Le problème, c’est que la plupart des sites WordPress se ressemblent: en-tête, grille, barre latérale, pied de page. La parallaxe casse ce modèle sans restructurer la mise en page, sans changer le thème, parfois même sans aucune extension. Mais toutes les implémentations de parallaxe ne fonctionnent pas correctement: défilement saccadé sur mobile, problèmes de performance, conflits d’accessibilité, vous connaissez la chanson.

Voici une analyse complète: ce qu’est le défilement parallaxe, quand il est rentable, quels thèmes et extensions offrent des résultats prêts à l’emploi, et comment éviter de plomber les performances. Avec des captures d’écran étape par étape, des comparatifs d’outils et des réponses aux questions fréquentes.

💡 Aperçu rapide:

• Comprendre comment fonctionne le défilement parallaxe et pourquoi votre site en a besoin
• Évaluer les risques: performances mobiles, accessibilité, choix de l’arrière-plan
• Choisir un thème avec parallaxe intégrée ou ajouter Slider Revolution pour les sliders
• Installer l’extension gratuite Advanced WordPress Backgrounds (AWB), une solution universelle pour Gutenberg, l’éditeur classique et WPBakery

Qu’est-ce que l’effet parallaxe

L’effet parallaxe est une technique où l’arrière-plan d’une page web défile plus lentement que le contenu au premier plan. Cela crée une illusion de profondeur: le contenu semble flotter au-dessus de l’image, et la page acquiert une qualité tridimensionnelle.

Cette technique est arrivée dans le web design en provenance de l’industrie du jeu vidéo, où la parallaxe était utilisée depuis des années pour créer des couches d’arrière-plan dans les jeux de plateforme. Aujourd’hui, c’est une fonctionnalité standard dans les thèmes premium, les constructeurs de pages et les extensions autonomes. Même le thème gratuit Twenty Seventeen livré par défaut avec WordPress proposait une parallaxe intégrée.

Le web design moderne est allé plus loin: la propriété CSS scroll-timeline permet de créer une parallaxe sans aucun JavaScript, en utilisant une animation pure liée à la progression du défilement. Mais pour un déploiement rapide sur des sites en production, les extensions et les constructeurs restent plus pratiques.

La vidéo ci-dessus est un guide complet pour ajouter la parallaxe dans WordPress (EN, 12 minutes). L’auteur montre l’installation, la configuration de la vitesse, la désactivation sur mobile et le travail avec les images d’arrière-plan en temps réel.

Pourquoi utiliser la parallaxe sur votre site

Tout d’abord, et c’est le plus évident, l’effet visuel «waouh». La parallaxe rend un site moderne, élégant et mémorable. Quand un utilisateur fait défiler la page et que l’arrière-plan se déplace à une vitesse différente, cela attire l’attention. Le contenu ressort.

Mais les avantages ne s’arrêtent pas à l’esthétique. La parallaxe divise la page en sections lisibles, en particulier sur les pages d’atterrissage et les pages d’accueil où vous devez guider le visiteur du titre jusqu’à l’appel à l’action. Une section avec un arrière-plan en parallaxe sépare naturellement un bloc de contenu d’un autre, en dirigeant l’attention.

Troisième raison, l’engagement et le temps passé sur le site. Les visiteurs s’attardent plus longtemps sur les pages avec un défilement interactif, ce qui améliore indirectement les indicateurs comportementaux et la conversion. Cela fonctionne particulièrement bien sur les sites monopages, les portfolios et les pages d’atterrissage produit.

Ce qu’il faut considérer avant d’implémenter la parallaxe

Chaque médaille a son revers. Voici ce qu’il faut garder à l’esprit avant d’ajouter des sections en parallaxe.

Choisir une image d’arrière-plan

L’image d’arrière-plan est l’élément clé. Elle doit être pertinente par rapport au sujet de la page et à la marque dans son ensemble. Si vous placez du texte ou des titres par-dessus l’arrière-plan, il est préférable d’utiliser un motif discret ou une superposition de couleur plutôt qu’une photo détaillée. Le contenu ne doit pas entrer en concurrence avec l’arrière-plan.

Pour les photos, uniquement en haute résolution. Une image d’arrière-plan plein écran floue ou pixelisée anéantit l’aspect professionnel. Nous avons compilé une collection de sites de photos stock avec des images gratuites et premium dans un article séparé sur 35 banques d’images.

La parallaxe sur les appareils mobiles

Sur les téléphones et les tablettes, la parallaxe fonctionne de manière peu fiable. Le défilement gestuel (le balayage) diffère de la molette de la souris, l’effet peut saccader, ralentir ou ne pas s’afficher du tout. La plupart des extensions et thèmes modernes vous permettent de désactiver la parallaxe pour le mobile avec une simple case à cocher, et c’est la meilleure option du point de vue de l’expérience utilisateur.

Accessibilité

Les arrière-plans en mouvement créent des problèmes pour les utilisateurs souffrant de troubles vestibulaires: mal des transports, nausées, difficulté à se concentrer. La requête média prefers-reduced-motion vous permet de désactiver automatiquement les animations de parallaxe pour ces visiteurs. Si votre extension ou votre thème ne la prend pas en charge, désactivez au minimum l’effet sur mobile.

Choisir un thème avec parallaxe intégrée

Pour ceux qui démarrent un projet à partir de zéro, la voie la plus simple est de choisir un thème avec la parallaxe déjà intégrée. La plupart des thèmes WordPress premium incluent cette fonctionnalité au moins pour la page d’accueil. Si vous avez besoin de parallaxe sur différentes pages du site, orientez-vous vers des thèmes polyvalents avec un constructeur avancé.

Trois options éprouvées:

• Divi d’Elegant Themes, un constructeur visuel avec une option d’arrière-plan parallaxe intégrée pour n’importe quelle section;
• Ultra de Themify, un thème polyvalent avec Themify Builder et des paramètres de parallaxe flexibles;
• Total de WPExplorer, un thème polyvalent basé sur WPBakery avec des options de parallaxe avancées (vitesse, direction, désactivation sur mobile).

Ajouter un arrière-plan parallaxe dans Total (WPBakery)

Voici un exemple étape par étape de configuration du parallaxe dans le thème Total. Total utilise WPBakery pour construire les pages, mais des options similaires existent dans la plupart des constructeurs de pages WordPress.

Commencez par insérer une ligne et ajoutez-y du contenu. Cliquez sur l’icône en forme de crayon pour modifier la ligne. Si la maquette ne comporte pas de barre latérale, activez l’option «Stretch row» afin que l’arrière-plan en parallaxe occupe toute la largeur de la ligne. Total propose également un mode plein écran qui étend l’arrière-plan sur l’intégralité de la fenêtre du navigateur.

Dans la section «Parallax», ajoutez une image d’arrière-plan et définissez la vitesse de défilement. Plus le chiffre est élevé, plus l’image se déplace et plus la résolution nécessaire est importante.

Dans les paramètres avancés du parallaxe, vous pouvez activer ou désactiver l’effet sur les appareils mobiles, choisir le style d’image (couvrir, fixe, répéter), la direction du mouvement et la vitesse précise.

Pour créer un contraste entre l’arrière-plan et le contenu, utilisez l’onglet «Overlay», par exemple un remplissage blanc semi-transparent par-dessus l’image. Enregistrez les modifications de la ligne et de la page.

Sliders avec parallaxe via Slider Revolution

Lorsque vous avez besoin non pas d’un arrière-plan statique mais d’un slider complet avec effet de parallaxe, le meilleur outil est Slider Revolution. Ce plugin premium propose des centaines d’options: polices, calques, effets de transition, mises en page et, bien sûr, un parallaxe multicouche. Un guide détaillé de Slider Revolution est disponible dans un article séparé.

Comment activer le parallaxe dans Slider Revolution

Installez le plugin et importez un modèle de slider prêt à l’emploi ou créez un slider de toutes pièces.

Modifiez l’arrière-plan principal de la diapositive: ajoutez l’image source et rendez-vous dans l’onglet «Parallax / 3D» pour attribuer le niveau de parallaxe. Ensuite, lorsque vous ajoutez des calques (texte, images, boutons), sélectionnez l’option Parallax / 3D pour chaque calque; la profondeur de parallaxe animera les éléments indépendamment les uns des autres.

Le slider terminé s’insère via un shortcode dans n’importe quel article ou page. Si vous utilisez WPBakery, faites simplement glisser l’élément Slider Revolution sur la page et sélectionnez le slider dans la liste déroulante.

Plugin gratuit Advanced WordPress Backgrounds (AWB)

Si vous avez déjà installé un thème qui ne prend pas en charge le parallaxe, vous n’avez pas besoin d’en changer. Advanced WordPress Backgrounds (AWB) est un plugin gratuit disponible dans le répertoire officiel WordPress.org qui ajoute des arrière-plans en parallaxe à n’importe quel élément de page: bloc, titre ou section entière. Le plugin est activement maintenu: dernière mise à jour en juin 2026, compatibilité avec WordPress 7.0 confirmée.

AWB prend en charge trois types d’arrière-plan: couleur, image et vidéo (YouTube/Vimeo/auto-hébergée). Il fonctionne avec Gutenberg, l’éditeur classique et WPBakery.

Installer AWB

Rendez-vous dans l’administration WordPress: Extensions → Ajouter. Dans la recherche, saisissez «Advanced WordPress Backgrounds», cliquez sur Installer → Activer.

La méthode pour ajouter un arrière-plan dépend de l’éditeur utilisé. Selon la description du plugin sur WordPress.org, les trois éditeurs donnent accès aux paramètres suivants: type d’arrière-plan (couleur, image ou vidéo), taille d’affichage (couvrir, contenir ou motif), position de l’arrière-plan en pourcentage, superposition avec choix de la couleur et de la transparence via le sélecteur Alpha, défilement parallaxe avec réglage de la vitesse, mise à l’échelle et transparence, ainsi que parallaxe à la souris (l’arrière-plan se déplace légèrement avec le curseur).

Dans le menu Réglages → AWB, un onglet regroupe les paramètres globaux. Vous pouvez y désactiver les effets de parallaxe et de vidéo pour les appareils mobiles et certains navigateurs.

AWB dans Gutenberg

AWB est entièrement compatible avec l’éditeur de blocs et fournit son propre bloc.

Insérez un bloc AWB, puis ajoutez à l’intérieur les autres blocs avec votre contenu.

Cliquez sur le bloc AWB et allez dans l’onglet «Bloc» du panneau latéral droit. Vous y configurez tous les paramètres de l’arrière-plan: type, image, parallaxe, superposition.

AWB dans l’éditeur classique

Dans l’éditeur classique, AWB fonctionne via un shortcode. Sélectionnez le texte auquel vous souhaitez appliquer un arrière-plan en parallaxe et cliquez sur l’icône AWB dans la barre d’outils de l’éditeur.

Choisissez une image d’arrière-plan et configurez les autres paramètres: couleur de superposition, type de parallaxe, vitesse. Cliquez sur «Insérer».

Le shortcode ressemble à ceci:

1
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]Your content inside the parallax background[/nk_awb]

L'inconvénient de l'approche par shortcodes est que les réglages d'arrière-plan ne sont pas visibles dans l'éditeur visuel, vous devez modifier le code manuellement. Pour un travail confortable, il est préférable d'utiliser Gutenberg ou WPBakery.

AWB avec WPBakery

Avec WPBakery, l'intégration est extrêmement simple. Un onglet supplémentaire «Backgrounds (AWB)» apparaît dans les paramètres de chaque ligne, où vous pouvez créer et configurer un arrière-plan parallaxe sans shortcodes, de manière entièrement visuelle.

⁉️🤔 Foire aux questions

Dois-je changer de thème pour avoir un effet parallaxe?

Non. Si votre thème actuel ne prend pas en charge le parallaxe, le plugin gratuit AWB suffit. Il ajoute l'effet à n'importe quel élément sur n'importe quelle page via une interface pratique, sans toucher au reste du thème. Changer de thème n'a de sens que si vous partez de zéro et souhaitez un parallaxe intégré dès le départ.

L'effet parallaxe ralentit-il le site?

Avec une configuration soignée, très peu. AWB utilise la bibliothèque légère Jarallax (sans jQuery depuis la version 1.11), et les navigateurs modernes optimisent transform sur le GPU. Le principal facteur de ralentissement est une image d'arrière-plan trop lourde. Optimisez vos photos en WebP ou AVIF, maintenez leur poids entre 200 et 300 Ko, et la vitesse n'en souffrira pas.

Le parallaxe fonctionne-t-il sur iPhone et Android?

Cela dépend de l'implémentation. Sur iOS, le parallaxe web est traditionnellement problématique: l'arrière-plan fixe (background-attachment: fixed) est ignoré par Safari. Le plugin AWB résout ce problème grâce à une animation JavaScript et fonctionne de manière stable. Mais la meilleure pratique pour le mobile est de désactiver totalement le parallaxe (case à cocher dans AWB ou les paramètres du thème): sur un petit écran, l'effet est à peine perceptible et vous économisez les ressources de la batterie.

Peut-on créer un parallaxe sans aucun plugin?

Oui. La propriété CSS animation-timeline: scroll() permet de lier l'animation de parallaxe à la progression du défilement sans une seule ligne de JavaScript. Cependant, la prise en charge par les navigateurs est encore incomplète (Safari inclus en 2024, Firefox depuis 2025). Pour la compatibilité avec les anciens navigateurs, un plugin reste plus fiable.

Qu'est-ce qui rend AWB meilleur que les autres plugins de parallaxe gratuits?

AWB se distingue sur trois points: premièrement, la prise en charge de trois éditeurs (Gutenberg, Classic, WPBakery) sans conflits; deuxièmement, des mises à jour régulières, le plugin est testé jusqu'à WordPress 7.0; troisièmement, le parallaxe à la souris et les arrière-plans vidéo dans la version gratuite, des fonctionnalités souvent réservées aux versions Pro chez les concurrents.

Le parallaxe est-il utile pour le SEO?

Pas directement. Le parallaxe est une technique visuelle, pas un facteur de classement. Mais indirectement, il peut aider: un temps passé sur la page plus long, un taux de rebond plus faible, les moteurs de recherche en tiennent compte. L'essentiel est de ne pas sacrifier la vitesse de chargement et la lisibilité du texte au profit de l'effet.

Quel outil choisir selon votre besoin

Si votre thème prend déjà en charge le parallaxe, utilisez les paramètres intégrés, cela suffit pour les pages d'accueil et les landing pages.

Si votre thème n'a pas de parallaxe, AWB couvre gratuitement la plupart des scénarios courants: installation rapide, interface intuitive, fonctionne avec Gutenberg et WPBakery, désactivation globale sur mobile. Pour les sliders avec un parallaxe multicouche, Slider Revolution est inégalé en termes de flexibilité d'animation.

Le parallaxe n'est pas une panacée. Sur les sites au contenu textuel dense (longs formats, documentation), il gêne plus qu'il n'aide. Mais pour une landing page, un portfolio, une page de promotion produit, cette technique reste l'une des plus fortes du web design. L'utilisateur oubliera le texte mais se souviendra de la façon dont la page «respirait» au fil du défilement.