Comment créer : défilement par parallaxe

Apprenez à créer un effet de défilement "parallaxe" en utilisant CSS.

Défilement par parallaxe

La défilement par parallaxe est une tendance de conception de site Web où le contenu d'arrière-plan (par exemple, les images) se déplace à une vitesse différente du contenu de premier plan lors du défilement. Cliquez sur le lien suivant pour voir la différence entre des sites avec et sans défilement par parallaxe.

Démonstration avec effet de défilement parallaxe

Démonstration sans effet de défilement parallaxe

Attention :Le défilement parallaxe n'est pas toujours efficace sur les appareils mobiles/smartphones. Cependant, vous pouvez désactiver cet effet sur les appareils mobiles en utilisant des requêtes media (voir l'exemple final de cette page).

Comment créer un effet de défilement parallaxe

Utilisez un élément conteneur et ajoutez-y une image de fond d'une hauteur spécifique. Ensuite, utilisez background-attachment: fixed Créez un effet de défilement parallaxe réel. D'autres attributs de fond sont utilisés pour centrer et redimensionner parfaitement l'image :

Exemples en pixels

<style>
.parallax {
  /* Image utilisée */
  background-image: url("img_parallax.jpg");
  /* Définir une hauteur spécifique */
  min-height: 500px;
  /* Créez un effet de défilement parallaxe */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Élément conteneur -->
<div class="parallax"></div>

Essayez-le vous-même

Dans l'exemple ci-dessus, l'height de l'image est définie en pixels. Si vous souhaitez utiliser un pourcentage, par exemple 100%, pour faire correspondre l'image à l'écran entier, définissez l'height du conteneur de parallaxe à 100%. Notez que vous devez également height: 100% Appliqués à <html> et <body> :

Exemples en pourcentage

body, html {
  height: 100%;
}
.parallax {
  /* Image utilisée */
  background-image: url("img_parallax.jpg");
  /* Hauteur complète */
  height: 100%;
  /* Créez un effet de défilement parallaxe */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Essayez-le vous-même

Certains appareils mobiles utilisent background-attachment: fixed peut poser des problèmes. Cependant, vous pouvez désactiver l'effet de défilement parallaxe sur les appareils mobiles en utilisant des requêtes media :

Exemple

/* Désactivez l'effet de défilement parallaxe pour toutes les tablettes et les téléphones portables. Vous pouvez augmenter ou diminuer les pixels si nécessaire */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

Essayez-le vous-même

Dans le code ci-dessus, lorsque la largeur de l'écran est inférieure ou égale à 1366 pixels, l'effet de défilement parallaxe est désactivé, ce qui est applicable à la plupart des tablettes et des téléphones portables. Cela est réalisé en modifiant .parallax de la classe background-attachment les attributs de fixed à scroll Pour que l'image de fond défile avec le reste de la page, au lieu de rester fixe dans la fenêtre de visualisation.