L’effet de parallaxe en CSS permet à une image en background de rester fixe, et ce pendant le scroll du contenu d’une page web. Le but est avant tout esthétique, et permet assez facilement de dynamiser vos sites, pendant l’exploration de l’utilisateur. Nous allons voir comment créer cet effet sous plusieurs facettes.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Les propriétés basiques
L’effet parallaxe consiste en plusieurs propriétés CSS « background » :
background-attachment: fixed; /* Fixe l'image pendant le scroll */
background-size: cover; /* L'image prendra 100% de l'espace, quitte à la crop */
background-position: center; /* Centre la position de l'image */
background-repeat: no-repeat; /* Empêche l'image de se répéter en fonction de la taille d'écran */
Ensuite, préciser où se trouve votre image, dans mon exemple :
background-image: url("https://www.codeur.com/tuto/wp-content/uploads/2022/02/p1.jpg");
On regroupe toutes ces propriétés dans une classe .parallax, et on lui crée une div dans notre HTML :
<div class="parallax"></div>
Il manque cependant un élément pour que tout fonctionne : un hauteur.
La hauteur
L’image est rajoutée, l’effet de parallaxe lors du scroll est créé, cependant vous ne verrez rien car il manque un élément important : la hauteur. Dans ce cas, il existe plusieurs solutions.
Une hauteur fixe
Vous pouvez fixer la taille de votre div en px, la hauteur sera donc fixe, elle ne variera pas. Dans notre exemple :
height: 1200px; /* On fixe une grande hauteur pour voir plus facilement le scroll */
A noter que vous pouvez utiliser la propriété min-height à la place de height. Cela permet de fixer une taille minimale. En effet, si vous rajouter du contenu à l’intérieur de votre section parallaxe, et que celui-ci dépasse la taille que vous avez fixée, la hauteur s’adaptera en fonction du contenu, sinon elle restera toujours à la taille minimale.
Une hauteur variable
Il est possible de préciser une taille en %, ou vh (hauteur du viewport). Cette technique est généralement utilisée pour avoir votre image à 100% de la hauteur de votre écran, mais il est possible de l’utiliser autrement en fonction de la situation. L’unité vh est plus simple d’utilisation, car les % sont relatifs à leur parent (il faudrait donc donner une height: 100% à html et body).
height: 100vh; /* Prendra 100% de la hauteur du viewport, et donc de l'écran */
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Compiler les sections de parallax
A partir de là, vous pouvez créer plusieurs sections avec le même code, seule l’image diffèrera. Pour cela, vous avez une classe commune à toutes nos sections :
.parallax {
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Et une classe spécifique, par image :
.parallax1 {
background-image: url("https://www.codeur.com/tuto/wp-content/uploads/2022/02/p1.jpg");
}
.parallax2 {
background-image: url("https://www.codeur.com/tuto/wp-content/uploads/2022/02/p1.jpg");
}
Notre HTML avec 2 balises ressemblera donc à ça :
<div class="parallax parallax1"></div>
<div class="parallax parallax2"></div>
Et voilà, le tour est joué ! Vous n’avez plus qu’à créer autant de sections qu’il vous faudra.
N’oubliez pas, si vous avez un soucis dans la création d’un effet parallaxe en CSS, n’hésitez pas à demander de l’aide à un freelance sur Codeur.com !
Ce n’est pas ça l’effet parallaxe… Le parallaxe est le fait de voir le fond défilé à une vitesse différente que le contenu lors du scroll, là il est fixe. C’est une solution « intermédiaire » en attendant d’y placer du JS 😉