Créer des effets de parallaxe avec CSS seul

Le principe de la parallaxe 3D en CSS

Pour créer un effet de parallaxe CSS seul, nous n’allons pas écouter l’événement de scroll avec JavaScript. Nous allons plutôt exploiter les propriétés de transformation 3D du CSS. Le concept repose sur la création d’un conteneur avec une perspective définie, puis sur l’éloignement des éléments d’arrière-plan sur l’axe Z. Plus un élément est repoussé en profondeur, plus il semblera défiler lentement par rapport aux éléments situés au premier plan.

Étape 1 : Créer la structure HTML

La mise en place nécessite un conteneur principal qui agira comme notre fenêtre de défilement, et plusieurs calques (layers) positionnés à l’intérieur. Chaque calque représentera un niveau de profondeur différent.

<div class="parallax-wrapper">
    <header class="parallax-layer layer-back">
         <h2>Arrière-plan lointain</h2>
    </header>
    <main class="parallax-layer layer-base">
          <h2>Contenu principal</h2>
              <p>Ce calque défile à une vitesse normale.</p>
    </main>
</div>

Étape 2 : Configurer le conteneur parent

Le conteneur doit obligatoirement posséder une hauteur définie (souvent relative à la hauteur de l’écran), masquer les débordements horizontaux pour éviter l’apparition d’une barre de défilement indésirable, et définir la perspective 3D.

.parallax-wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 10px;
  }

Étape 3 : Styliser les calques de parallaxe

Les enfants directs du conteneur doivent partager certaines propriétés de positionnement absolu pour que l’effet 3D s’applique correctement sur toute la surface disponible.

.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  }

Ensuite, nous appliquons les transformations spécifiques à chaque calque. L’arrière-plan est repoussé sur l’axe Z grâce à la propriété translateZ. Cependant, éloigner un élément le rend visuellement plus petit. Il est donc indispensable de compenser cette réduction de taille en utilisant la fonction scale().

.layer-back {
  transform: translateZ(-10px) scale(2);
  z-index: -1;
  }
  
  .layer-base {
     transform: translateZ(0);
     z-index: 1;
     }

Respecter l’accessibilité web

Les animations liées au défilement peuvent provoquer des vertiges ou des nausées chez certains utilisateurs sensibles. Il est crucial de désactiver l’effet de parallaxe CSS pour les personnes ayant activé la réduction des animations au niveau de leur système d’exploitation.

@media (prefers-reduced-motion: reduce) {
  .parallax-wrapper {
      perspective: none;
     }
   .layer-back {
       transform: translateZ(0) scale(1);
         }
    }