L'effet de défilement parallaxe est utilisé pour créer une illusion de profondeur pour un effet 3D, avec plusieurs couches de défilement. L'effet de parallaxe est très populaire dans les jeux vidéo depuis des années et il est maintenant utilisé dans la conception de sites Web également.
Il améliore l'apparence du site Web. Dans le défilement de la parallaxe, l'élément d'arrière-plan se déplace à une vitesse plus lente que l'élément de premier plan.
Le défilement parallaxe est une tendance des sites Web où le contenu d'arrière-plan (c'est-à-dire une image) se déplace à une vitesse différente de celle du contenu de premier plan pendant le défilement.
Remarque : le défilement parallaxe ne fonctionne pas toujours sur les appareils mobiles/téléphones intelligents. Cependant, vous pouvez utiliser des Media Queries pour désactiver l'effet sur les appareils mobiles.
Comment créer un effet de défilement parallaxe ?
Pour créer un effet de défilement parallaxe, utilisez un élément conteneur et ajoutez-y une image d'arrière-plan d'une hauteur spécifique. Utilisez ensuite la propriété background-attachment : fixed pour créer l'effet de parallaxe réel.
La propriété background-attachment donne l'effet réel à la page Web. En plus de cette propriété, nous avons besoin de quelques autres propriétés CSS. Les autres propriétés de l'arrière-plan sont utilisées pour centrer et mettre à l'échelle l'image de manière parfaite.
- background-attachment : La valeur fixe est ajoutée à background-attachment pour donner l'effet de parallaxe à la page Web.
- background-image : elle est utilisée pour ajouter l'image de fond à la page Web.
- background-position : Cette propriété est utilisée pour positionner l'image d'arrière-plan au centre.
- background-size : Cette propriété est utilisée pour mettre à l'échelle l'image afin qu'elle remplisse l'arrière-plan.
- background-repeat : La valeur no-repeat lui est ajoutée pour que les images ne se répètent pas en arrière-plan.
Voici un exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("images/img_parallax.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("images/img_parallax2.jpg");
min-height: 400px;
}
.bgimg-3 {
background-image: url("images/img_parallax3.jpg");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Désactiver le défilement de la parallaxe pour les tablettes et les téléphones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="bgimg-1">
<div class="caption">
<span class="border">DÉFILER VERS LE BAS</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Démo Parallaxe</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">MOINS DE HAUTEUR</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Faites défiler vers le haut et vers le bas pour vous faire une idée du fonctionnement du défilement parallaxe - Parallax Scrolling.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">DÉFILER VERS LE HAUT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Faites défiler vers le haut et vers le bas pour vous faire une idée du fonctionnement du défilement parallaxe.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
L'exemple ci-dessus utilise des pixels et le pourcentage (%) pour définir la hauteur des images.
Nous définissons la hauteur minimum du conteneur de ".bgimg-1" à 100 % et celle des conteneurs ".bgimg-2" et ".bgimg-3" à 400px.
Remarque : Nous appliquons également une hateur de 100% (height : 100%) à <html> et <body> pour que les images s'adaptent à tout l'écran.
Certains appareils mobiles ont un problème avec background-attachment : fixed. Toutefois, vous pouvez utiliser des Media Queries pour désactiver l'effet de parallaxe pour les appareils mobiles comme nous l'avons fait en définissant la propriété background-attachment à scroll.
Cliquez sur le lien ci-dessous pour voir le résultat de l'exemple de défilement parallaxe fait plus haut.
Conclusion
Dans ce tutoriel, nous avons appris les propriétés CSS utilisées pour ajouter l'effet de défilement parallaxe à une page Web que nous avons illustré avec un exemple. L'effet de défilement parallaxe améliore le site Web avec des effets visuels en 3D.
