Comment - Défilement de parallaxe
Apprenez à créer un effet de défilement "parallaxe" avec CSS.
Parallaxe
Le défilement de parallaxe est une tendance de site Web où le contenu d'arrière-plan (c'est-à-dire une image) est déplacé à une vitesse différente de celle du contenu de premier plan lors du défilement. Cliquez sur les liens ci-dessous pour voir la différence entre un site Web avec et sans défilement parallaxe.
Démo avec défilement parallaxe
Démo sans défilement de parallaxe
Remarque : le défilement parallaxe ne fonctionne pas toujours sur les appareils mobiles/téléphones intelligents. Cependant, vous pouvez utiliser des requêtes multimédias pour désactiver l'effet sur les appareils mobiles (voir le dernier exemple sur cette page).
Comment créer un effet de défilement de parallaxe
Utilisez un élément conteneur et ajoutez une image d'arrière-plan au conteneur avec une hauteur spécifique. Utilisez ensuite le background-attachment: fixed
pour créer l'effet de parallaxe réel. Les autres propriétés d'arrière-plan sont utilisées pour centrer et redimensionner parfaitement l'image :
Exemple avec pixels
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
L'exemple ci-dessus utilise des pixels pour définir la hauteur de l'image. Si vous souhaitez utiliser un pourcentage, par exemple 100 %, pour que l'image tienne sur tout l'écran, définissez la hauteur du conteneur de parallaxe sur 100 %. Remarque : Vous devez également appliquer height: 100%
à la fois <html> et <body> :
Exemple avec pourcentage
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Certains appareils mobiles ont un problème avec background-attachment: fixed
. Cependant, vous pouvez utiliser des requêtes multimédias pour désactiver l'effet de parallaxe pour les appareils mobiles :
Exemple
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}