Dans le domaine du marketing et du design web, la créativité ne semble pas avoir de fin. Il y a toujours de nouvelles idées pour attirer l’attention des utilisateurs. L’une des dernières tendances est le ParallaxScrolling. Cette technique consiste à donner une impression tridimensionnelle en faisant défiler le site web.
Qu’est-ce que le Parallax-Scrolling ?
L’effet Parallax est créé par le fait que certains éléments des sites web se déplacent plus rapidement que les images d’arrière-plan. Un domaine d’application particulièrement apprécié du parallax scrolling est le storytelling, car les animations, les images et les graphiques semblent plus vivants grâce à ce que l’on appelle l’effet parallaxe.
Effet parallax dans le design web
La fonction parallaxe permet de faire « défiler » le slide, les objets des sites web à une vitesse différente de celle des autres objets pendant le défilement slide. Cela peut même aller jusqu’à ce que vous fassiez défiler une page web, le slide de haut en bas, mais qu’un objet parallaxe se déplace pendant ce temps de bas en haut sur la page. Grâce aux différents réglages de parallaxe de divers objets, il est également possible de les déplacer à différentes vitesses. Cela est souvent utilisé pour donner une certaine profondeur au blog et à ses représentations.
L’effet parallaxe a fait son entrée dans le monde virtuel il y a quelque temps déjà. Il a d’abord permis d’améliorer l’expérience utilisateur de slide pour les joueurs, jusqu’à ce que cette tendance soit également appliquée au design web, afin de rendre la vidéo, le contenu encore plus proche du spectateur.
Comment créer un défilement parallaxe en CSS et HTML
Pour le marketing, vous avez envie de faire passer votre site internet au niveau design supérieur grâce au défilement parallaxe ?
Bien que l’implémentation du code nécessaire à la réalisation de cette animation puisse sembler fastidieuse, l’utilisation de CSS pour créer cette animation simplifie la position des choses.
Il existe plusieurs façons d’intégrer le défilement parallaxe à votre site internet avec CSS. L’approche la plus simple consiste à utiliser un élément conteneur pour définir une hauteur particulière pour une image d’arrière-plan.
Créer un élément conteneur et définir la hauteur de l’image
Vous utiliserez cette propriété pour créer l’effet de défilement parallaxe : background-attachment : fixed.
Vous pouvez utiliser d’autres propriétés d’arrière-plan à des fins de style supplémentaires, comme le centrage et la mise à l’échelle de l’image.
Définition d’une hauteur maximale
Au lieu de définir une hauteur spécifique en termes de pixels, vous pouvez également définir la position de la hauteur à 100 % (ce qui correspond alors à la hauteur de l’image ou de la vidéo).
Vous pouvez tester le code et jouer avec le défilement parallaxe CSS sur Codepen.
Créer une réactivité mobile
Lorsque vous commencerez à jouer avec ce code, vous vous rendrez rapidement compte que background-attachment : fixed pose souvent des problèmes avec les versions mobiles de votre blog.
Il existe une solution simple pour résoudre ce problème en ajoutant une requête média.
Comment faire un défilement parallaxe dans WordPress
Vous pouvez créer un effet de défilement parallaxe dans WP de plusieurs façons. Vous pouvez soit coder votre nouvelle section de parallaxe dans le code de votre site Web, installer un thème gratuit de défilement de parallaxe, ou installer un plugin dédié.
L’une des meilleures choses à propos de WordPress est qu’il est hautement personnalisable et flexible. Chacune de ces options vous permettra d’obtenir un résultat similaire, voire identique.
Cependant, si vous souhaitez bénéficier d’une flexibilité maximale, nous vous recommandons d’opter pour le codage HTML et CSS. Vous pouvez peaufiner votre code sans avoir à changer de thème ou à installer un plugin qui pourrait ralentir votre site.
- Ajouter un défilement parallaxe à l’aide de CSS et de HTML
Si vous souhaitez ajouter un effet de défilement parallaxe à toutes vos pages, il existe un moyen simple et sans tracas de le faire par le biais de CSS et HTML. Avant d’utiliser cette méthode, assurez-vous que vous êtes à l’aise pour modifier les fichiers de thème dans WordPress.
Tout d’abord, accédez à l’éditeur de votre thème en cliquant sur Apparence > Éditeur de thème dans la barre latérale d’administration.
Dans la rubrique Theme Files, recherchez le fichier correspondant à la section dans laquelle vous souhaitez ajouter une image d’arrière-plan de type parallaxe. Voulez-vous l’ajouter juste en dessous de l’en-tête ? Au centre de la page ? Ou peut-être en bas de la page ?
Tous les thèmes ont des fichiers pour les sections d’en-tête et de pied de page, ainsi que pour chaque modèle de page. Heureusement, la plupart des fabricants de thèmes nomment ces fichiers de manière accessible.
Si vous cherchez la section de l’en-tête, le fichier sera probablement appelé « header.php » ou « Header ». Si vous recherchez un certain modèle de page, il sera probablement appelé « Single Page » ou « Page Template ».
Ensuite, téléchargez votre image d’arrière-plan parallaxe dans votre bibliothèque multimédia WP. Enregistrez l’URL de l’image pour l’étape suivante.
Enfin, copiez le CSS de la parallaxe dans le code de votre site Web. Allez dans Apparence > Personnaliser > CSS supplémentaire.
Veillez à remplacer le fichier « image.png » par l’URL de votre image de fond.
- Installez un thème à défilement parallaxe
Vous n’aimez pas coder ? L’installation d’un thème de défilement de parallaxe est l’un des moyens les plus faciles et les plus simples d’ajouter un effet de défilement de parallaxe à votre site Web WP.
Ces thèmes sont dotés d’une fonctionnalité de parallaxe intégrée, qui permet d’ajouter et de supprimer facilement l’effet sur votre site Web.
- Installez un plugin de parallaxe d’arrière-plan
Si vous ne voulez pas installer un nouveau thème entièrement, vous pouvez installer un plugin tel que Advanced WordPress Backgrounds et Parallax Image.
Ces deux plugins ajoutent un effet de parallaxe à votre site après que vous ayez ajouté un simple shortcode au contenu. Ils sont compatibles avec les principaux constructeurs de pages WP tels que WPBakery et Elementor.