L’effet parallax : créer une illusion de profondeur

L’effet parallax donne l’impression que l’arrière-plan se déplace plus lentement que le premier plan lors du défilement, créant une sensation de profondeur 3D. C’est un effet populaire sur les landing pages et les portfolios. Ce tutoriel vous montre 3 approches : CSS pur, JavaScript simple, et une version performante avec transform.

Méthode 1 : CSS pur avec background-attachment

La méthode la plus simple — une seule propriété CSS :

<section class="parallax-section">
  <div class="parallax-content">
    <h1>Bienvenue à Dakar</h1>
    <p>La capitale du digital en Afrique de l'Ouest</p>
  </div>
</section>
<section class="content-section">
  <p>Contenu normal ici...</p>
</section>

.parallax-section {
  height: 100vh;
  background-image: url('dakar-skyline.jpg');
  background-attachment: fixed;   /* L'image ne bouge pas avec le scroll */
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-content {
  text-align: center;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.content-section {
  padding: 60px 20px;
  background: white;
}

Avantage : zéro JavaScript. Limites : ne fonctionne pas sur iOS Safari (Apple désactive background-attachment: fixed sur mobile pour des raisons de performance).

Méthode 2 : JavaScript avec transform (performant)

Cette méthode fonctionne sur tous les appareils et offre un contrôle précis de la vitesse :

<div class="parallax-wrapper">
  <div class="parallax-bg" id="parallaxBg"></div>
  <div class="parallax-foreground">
    <h1>Votre titre ici</h1>
  </div>
</div>

.parallax-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: -20%;  /* Extra espace pour le mouvement */
  left: 0;
  width: 100%;
  height: 140%;
  background: url('background.jpg') center/cover;
  will-change: transform;
}

.parallax-foreground {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

const parallaxBg = document.getElementById('parallaxBg');

window.addEventListener('scroll', () => {
  requestAnimationFrame(() => {
    const scrolled = window.pageYOffset;
    const speed = 0.5; // 0 = fixe, 1 = vitesse normale, 0.5 = moitié
    parallaxBg.style.transform = 'translateY(' + (scrolled * speed) + 'px)';
  });
});

Pourquoi transform et pas top ou background-position ? Les propriétés transform et opacity sont les seules qui n’entraînent pas de recalcul du layout. Elles sont traitées directement par le GPU, ce qui donne des animations fluides à 60fps même sur des appareils modestes.

Méthode 3 : Parallax multi-couches

const layers = document.querySelectorAll('.parallax-layer');

window.addEventListener('scroll', () => {
  requestAnimationFrame(() => {
    const scrolled = window.pageYOffset;
    
    layers.forEach(layer => {
      const speed = parseFloat(layer.dataset.speed);
      layer.style.transform = 'translateY(' + (scrolled * speed) + 'px)';
    });
  });
});

<div class="parallax-layer" data-speed="0.1">Nuages (très lent)</div>
<div class="parallax-layer" data-speed="0.3">Montagnes (lent)</div>
<div class="parallax-layer" data-speed="0.6">Arbres (moyen)</div>
<div class="parallax-layer" data-speed="1">Premier plan (vitesse normale)</div>

Chaque couche a une vitesse différente via data-speed. Les éléments lointains bougent lentement (0.1), les proches rapidement (1). Cela crée une vraie illusion de profondeur.

Performance : les règles à respecter

will-change: transform sur les éléments animés — prévient le navigateur de l’animation à venir
requestAnimationFrame au lieu d’appeler directement dans le handler de scroll — synchronise avec le rafraîchissement écran
Désactiver sur mobile si le contenu est trop lourd — les performances varient beaucoup
Tester avec DevTools Performance — visez 60fps, pas de long tasks

// Désactiver le parallax sur mobile
const isMobile = window.matchMedia('(max-width: 768px)').matches;
if (!isMobile) {
  window.addEventListener('scroll', parallaxHandler);
}

Exercice

Créez une landing page avec 3 sections parallax alternées avec des sections de contenu normal
Donnez une vitesse de parallax différente à chaque section
Ajoutez un texte qui apparaît en fade-in quand il entre dans le viewport
Désactivez l’effet sur mobile et remplacez par une image statique

Comment créer un effet parallax avec CSS et JavaScript