
Comment créer un effet parallax scrolling en utilisant HTML et CSS ?
30 mars 2019 2 Par Miss DevSystème très utilisé de nos jours pour créer de beau site dynamique, l’effet de défilement d’images est très simple à réaliser. En effet, il ne nécessite que du HTML et CSS de base. C’est ce que nous allons voir ici.

Les besoins
Comme toujours, nous allons commencer par les besoins. Ici, ils sont très simples. Il faut sélectionner 3 images qui serviront d’arrière-plan, mais leurs tailles doivent toute être similaires.
En ce qui me concerne, pour cette présentation je vais utiliser le site Pixabay pour récupérer des images gratuites et de qualités.
Je vais aussi me servir d’un site de génération de textes en latin pour combler les vides. Il suffit de sélectionner le nombre de paragraphes, mots… que l’on veut et de cliquer sur générer pour obtenir alors le texte.
Le code
HTML
La première chose à écrire sont les <div> qui serviront à intégrer les images en CSS. Vous devez faire autant de
que d’images à intégrer et les ordonnées suivant l’ordre d’apparition souhaité. Il faut ensuite attribuer un id à chacun.
Cependant, il existe un problème comme vous pouvez le constater. Il faudrait pouvoir régler la taille et améliorer le design des textes. Pour cela il est nécessaire de créer une <div> interne pour chacune des parties. On peut alors lui ajouter une class qui sera la même partout. La dernière balise à ajouter est le paragraphe. Ces <p> servent à améliorer le texte si besoin.
N.B : Je n’utilise pas de class pour ces <p> car je me servirais de l’id parent pour les distinguer.
parallax-scrolling.html
<div id="part1"> <div class="inside"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut dignissim tortor, in efficitur risus. Praesent ultrices felis mauris, ac sagittis ante condimentum id. Sed venenatis non eros eu molestie. Nam placerat dui urna, non consectetur tellus ullamcorper eu. Nullam tempor massa non massa consequat, ut mattis ex maximus. Maecenas bibendum erat in est semper condimentum. Vestibulum id ligula arcu. Morbi placerat, ante in interdum dictum, est sem aliquam augue, vel congue metus metus nec urna. Proin venenatis cursus ornare. </p> </div> </div> <div id="part2"> <div class="inside"> <p> Donec suscipit elit blandit cursus convallis. Morbi fringilla massa sed nunc gravida iaculis. Praesent eget nisl a lorem luctus sollicitudin. Phasellus ac metus dui. Etiam sit amet rhoncus sapien. Ut id augue id nisi blandit accumsan. Fusce aliquet urna nec rhoncus pretium. Praesent tristique ante eget ipsum bibendum, a pharetra dui elementum. Mauris eget pulvinar sapien. Suspendisse eget quam est. In fringilla porttitor erat ac imperdiet. Cras consequat vel mauris non aliquam. Proin nec massa tristique neque ornare porttitor ut et augue. Sed enim lacus, dictum a sapien vitae, imperdiet semper nunc. Curabitur rutrum faucibus felis eu luctus. Quisque libero dui, feugiat eget rhoncus sit amet, ornare ac nibh. </p> </div> </div> <div id="part3"> <div class="inside"> <p> Proin vestibulum velit venenatis congue tincidunt. Proin dapibus condimentum hendrerit. Vivamus rhoncus vestibulum sodales. Donec odio eros, ultricies sed tortor non, faucibus cursus dolor. Duis ac cursus urna, id varius dui. Nulla et facilisis orci. Suspendisse consectetur est id facilisis feugiat. Cras finibus magna in neque pretium hendrerit ac quis elit. Cras lacinia purus ut lorem dignissim tincidunt. Ut non arcu quis nulla consequat lobortis. Fusce egestas quis tortor et scelerisque. Integer fermentum lectus eu sodales consectetur. Phasellus sit amet nisl non lorem pellentesque pretium ut eu enim. Integer vestibulum urna magna, ac consequat dui pretium ac. Nam nulla nulla, rhoncus a mollis a, condimentum vel lectus. </p> </div> </div>
CSS
Nous voici à la mise en page. Je règle les détails visuels en premier tel que la couleur du texte, la police… Puis je rajoute ce que l’on cherche, c’est-à-dire les images en position fixed pour avoir cet effet de scrolling tant attendu.
parallax-scrolling.css
body { margin: 0; padding: 0; color:rgb(233, 222, 222); font: Arial, Sans-Serif; font-weight: bold; } #part1 { background: url("images/sea1.jpg") center 0 no-repeat fixed; } #part2 { background: url("images/sea2.jpg") center 0 no-repeat fixed; } #part3 { background: url("images/sea3.jpg") center 0 no-repeat fixed; } .inside { margin: 0px auto; text-align:justify; width: 500px; padding: 50px 0px; height: 1200px; }
Je remarque que mon texte de la dernière image est illisible. Pour éviter de faire cette erreur classique 😉 (voir L’effet parallaxe – des erreurs à éviter à travers 6 sites web), je décide donc de changer la couleur du texte de cette partie en faisant color: #2d2d2d; mais le texte est encore difficilement lisible. Je rajoute alors une couleur de fond et améliore un peu le rendu.
parallax-scrolling.css
#part3 .inside p { color: #170b27; background-color: #fdfbfb77; padding: 15px 15px; border-radius: 10px; }
Résultat
See the Pen Parallax Scrolling with HTML and CSS only by Miss Dev (@MissDev) on CodePen.
Pour aller plus loin
Bien sûr, il existe des extensions permettant d’améliorer encore plus le design. En ajoutant entre autre du JavaScript simple ou avec sa librairie JQuery.
Il faudrait aussi l’améliorer en le rendant responsive.
2 commentaires
Laisser un commentaire Annuler la réponse
Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.
Merci à toi 🙂
Merci pour cette astuce simple et efficace, mais surtout très légère car exempt de script.