Comment créer un effet parallax scrolling en utilisant HTML et CSS ?

Comment créer un effet parallax scrolling en utilisant HTML et CSS ?

30 mars 2019 2 Par Miss Dev

Systè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.

parallax-scrolling
Voici un effet de parallax utilisant seulement du HTML et CSS.

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.

Il faut ensuite vérifier si tout est bien mis en page. Je change alors la position et la taille des parties inside afin que l’on voit toutes les images de la même façon (height: 1200px; suivant la hauteur de vos images).
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.

Vous aller aussi aimer:

  1. Comment créer une bannière animée à la souris ?
  2. Comment créer une simple transition entre deux images ?
  3. Réaliser un bouton se déplaçant avec la souris.
  4. L’effet parallaxe – des erreurs à éviter à travers 6 sites web.
CatégorieWeb Design
Mots-clésAnimation Tutoriel

2 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.