Parallax Layers
Trois couches CSS empilées à des profondeurs translateZ distinctes dans un contexte preserve-3d — le survol approfondit chaque plan et révèle l'illusion de profondeur.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le conteneur .card-parallax-layers combine deux propriétés CSS qui ouvrent un espace 3D partagé : transform-style: preserve-3d indique au moteur de rendu de traiter les enfants directs dans le même volume tridimensionnel (au lieu de les aplatir), et perspective: 1000px fixe la distance de l'œil virtuel. Plus cette valeur est faible, plus la distorsion perspective est intense.
Chaque couche enfant est placée à une profondeur Z propre via translateZ : la couche de fond à 20 px, la couche intermédiaire à 40 px, la couche avant-plan à 60 px. La projection perspective CSS fait paraître les éléments proches légèrement plus grands — ce différentiel d'échelle entre les trois plans crée l'illusion de profondeur même sans mouvement.
Au survol :hover, chaque couche avance de 10 px supplémentaires en Z (20→30, 40→50, 60→70). La transition: transform .3s anime ce changement. Comme la couche avant-plan est déjà la plus proche du point de vue, l'agrandissement perspectif qu'elle subit lors de cette avancée est plus fort que celui du fond — c'est ce différentiel d'agrandissement qui donne la sensation de parallaxe entre les couches.
L'effet est entièrement déclaratif CSS — aucun JavaScript, aucun requestAnimationFrame, aucun écouteur mousemove. La carte ne s'incline pas selon la position du curseur : seul le survol global déclenche la transition Z. Résultat : zéro coût de calcul JS, compatible SSR/CSP strict.
Accessibilité
- prefers-reduced-motion absent du code : les transitions CSS jouent systématiquement au survol, même si l'utilisateur a activé « Réduire les animations » dans son OS. Pour une implémentation accessible, enveloppez les déclarations
transitiondans@media (prefers-reduced-motion: no-preference) { … }. - Aucun rôle ARIA (
role,aria-label) n'est présent sur la carte dans le code de base — les couches sont traitées comme décoratives. Si le contenu des couches est informatif, ajoutezrole="img"et unaria-labelsur le conteneur. - Le déclencheur est
:hoveruniquement. Un utilisateur clavier (tabulation sur la carte) n'active pas l'effet 3D. Pour corriger, ajoutez.card-parallax-layers:focus-within .layer-N { transform: translateZ(…) }en miroir des règles:hover. - La couche
layer-1a une opacité de 0,3 dans l'exemple fourni — si elle contient du texte ou une icône informative, le ratio de contraste risque d'être insuffisant (WCAG 1.4.3). Vérifiez le contraste ou utilisez cette couche uniquement pour des éléments décoratifs. - L'effet est purement visuel et n'interfère pas avec les lecteurs d'écran si le contenu textuel reste dans le flux DOM normal (les couches ne sont pas en
aria-hiddendans le code de base).
Compatibilité navigateur
Nécessite transform-style: preserve-3d et perspective — supportés nativement dans tous les navigateurs modernes depuis 2015.
Sans support de transform-style: preserve-3d, les couches s'affichent aplaties dans leur ordre DOM — le contenu reste lisible et la carte fonctionnelle, l'effet de profondeur n'apparaît pas.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="card-demo card-parallax-layers">
<!-- Couche de fond : élément décoratif, texture, image (translateZ le plus faible) -->
<span class="layer-1" style="position: absolute;">…</span>
<!-- Couche intermédiaire : badge, prix, catégorie -->
<span class="layer-2" style="position: absolute;">…</span>
<!-- Couche avant-plan : titre principal, CTA (translateZ le plus élevé) -->
<span class="layer-3">…</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --bg-card | #12121a | Variable CSS sur :root — couleur de fond de la carte. Accepte n'importe quelle valeur CSS (couleur, dégradé via background-image, transparent). |
| --radius-xl | 1rem | Variable CSS sur :root — rayon des coins de la carte. |
| perspective | 1000px | Propriété CSS sur .card-parallax-layers — distance de l'œil virtuel. 500 px = effet exagéré et dramatique ; 1500 px+ = perspective subtile et élégante. |
| translateZ (layer-1) | 20px / hover 30px | Profondeur de la couche de fond, déclarée dans .card-parallax-layers .layer-1 et :hover .layer-1. Augmentez l'écart repos/hover pour accentuer l'animation. |
| translateZ (layer-2) | 40px / hover 50px | Profondeur de la couche intermédiaire dans .card-parallax-layers .layer-2 et :hover .layer-2. |
| translateZ (layer-3) | 60px / hover 70px | Profondeur de la couche avant-plan dans .card-parallax-layers .layer-3 et :hover .layer-3. C'est le plan le plus visible — réservez-le au titre ou à l'élément principal. |
| transition | .3s | Durée de la transition sur chaque couche. Ajoutez un easing explicite (ex. ease-out, cubic-bezier(.2,.6,.3,1)) pour personnaliser la cinématique de profondeur. |
FAQ
:hover — toutes les couches avancent en Z sans rotation ni tilt selon la position précise du curseur. Pour ajouter l'inclinaison (rotX/rotY calculés sur mousemove), une dizaine de lignes JS suffisent : écoutez mousemove sur la carte, normalisez l'offset du curseur entre -1 et 1, puis appliquez rotateX(Ydeg) rotateY(Xdeg) sur le conteneur en direct via style.transform..card-parallax-layers et définissez sa profondeur dans le CSS : .card-parallax-layers .layer-4 { transform: translateZ(80px); transition: transform .3s } avec son état hover correspondant. Il n'y a pas de limite technique, mais au-delà de 4 ou 5 couches, la profondeur perçue se sature visuellement et les couches les plus proches peuvent dépasser les bords de la zone perspective.:hover est rarement déclenché par le toucher (comportement dépendant du navigateur et de l'OS). La carte s'affiche statiquement avec les couches à leur profondeur de repos — pas d'erreur, juste aucune animation. Pour activer l'effet au toucher, ajoutez un gestionnaire touchstart/touchend en JS qui ajoute et retire une classe CSS .is-hovered sur la carte, en miroir des règles :hover.
