Parallax Depth Text
Trois calques de texte glissent à des vitesses différentes selon le pointeur — l'écart de déplacement combiné à la hiérarchie d'opacité crée une profondeur 3D par pur CSS/JS.
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. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le balisage repose sur trois .kt-parallax-layer positionnés en absolu dans un .kt-parallax-container doté de perspective: 600px. Chaque calque déclare sa vitesse via data-speed : 0,08 pour le calque arrière, 0,04 pour le milieu, 0,01 pour le premier plan. Tous portent le même texte — l'écart de vitesse suffit à créer l'illusion 3D sans canvas ni WebGL.
Un écouteur mousemove sur le wrapper .demo-preview normalise la position du pointeur en coordonnées centrées (−0,5 à 0,5 sur chaque axe). La translation de chaque calque vaut tx = x × speed × 800 et ty = y × speed × 400 (rapport 2:1 horizontal/vertical) : à speed 0,08, le calque arrière se décale jusqu'à ±320 px en X ; à speed 0,01, le calque avant de ±40 px à peine.
La propriété transition: transform .15s ease-out sur chaque calque interpole vers la nouvelle position à chaque événement — aucun requestAnimationFrame, aucune boucle. L'événement mouseleave repasse tous les transforms à translate(0,0) avec la même transition, ce qui ramène les calques au repos en douceur.
La hiérarchie visuelle amplifie la perception spatiale : le calque arrière est à 25 % d'opacité et 2,6 rem ; le milieu à 50 % et 2,4 rem ; le premier plan à pleine opacité avec un text-shadow indigo — l'œil perçoit le calque le moins opaque comme le plus lointain, le plus lumineux comme le plus proche.
Accessibilité
- prefers-reduced-motion absent : le code ne vérifie pas cette préférence — les translations se déclenchent même si l'utilisateur a activé la réduction de mouvement. À corriger en ajoutant
if (window.matchMedia('(prefers-reduced-motion:reduce)').matches) return;avant les écouteursmousemove. - Aucun
aria-hiddenniroledans le code fourni : si les calques sont purement décoratifs, ajoutezaria-hidden="true"sur le conteneur ; s'ils portent un contenu informatif, ajoutezrole="img"etaria-label. - Le texte est rendu en HTML natif (pas de canvas) — il reste sélectionnable, copiable et lu par les technologies d'assistance même sans JS.
- Seul le calque avant (blanc, 2,2 rem) doit satisfaire le contraste WCAG AA (≥ 4,5:1 sur fond sombre). Les calques arrière (opacité 25–50 %) sont décoratifs et n'ont pas à respecter ce seuil.
- L'effet ne comporte aucun élément interactif : la navigation au clavier n'est pas affectée, aucun piège à focalisation.
Compatibilité navigateur
Nécessite CSS transform/transition et les événements DOM mousemove/mouseleave — support universel depuis 2015. Zéro dépendance externe.
Sans JS, les trois calques s'affichent superposés à leur position naturelle — le texte reste lisible. Sans CSS transform, les calques se chevauchent sans décalage, aucune erreur fatale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="kt-parallax-container" id="parallax1">
<div class="kt-parallax-layer" data-speed="0.08">Texte</div>
<div class="kt-parallax-layer" data-speed="0.04">Texte</div>
<div class="kt-parallax-layer" data-speed="0.01">Texte</div>
</div>
<span class="demo-hint">Déplacer la souris</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 |
|---|---|---|
| data-speed (par calque) | 0.08 / 0.04 / 0.01 | Coefficient de translation de chaque calque. Plus la valeur est haute, plus le calque se déplace vite. Élargissez l'écart entre calques pour un effet de profondeur plus dramatique. |
| Couleur — .kt-parallax-layer:nth-child(1) | rgba(99, 102, 241, 0.25) | Couleur du calque arrière (le plus rapide). Réduire l'opacité à 0.10–0.15 pour un fond encore plus discret ; changer la teinte pour adapter à la charte. |
| Couleur — .kt-parallax-layer:nth-child(2) | rgba(139, 92, 246, 0.5) | Couleur du calque intermédiaire. Ajuster l'opacité entre 0.3 et 0.7 pour renforcer ou atténuer le sentiment de profondeur. |
| font-size par calque | 2.6 / 2.4 / 2.2 rem | Dégressif arrière → avant. Inverser le ratio (avant plus grand) ou égaliser les tailles change radicalement la lecture spatiale. |
| perspective (conteneur) | 600px | Valeur CSS perspective sur .kt-parallax-container. 300 px = distorsion 3D plus forte ; 1200 px = effet atténué, plus subtil. |
| transition (calques) | transform .15s ease-out | Délai et easing du suivi souris. 0.25s ease-in-out = mouvement organique ; 0s = collé au pointeur, réactif mais saccadé. |
| Amplitude horizontale — constante JS | 800 | Multiplicateur X dans tx = x × speed × 800 (ligne var tx). Réduire à 500 pour moins de déplacement latéral, augmenter à 1200 pour un effet cinématique. |
| Amplitude verticale — constante JS | 400 | Multiplicateur Y dans ty = y × speed × 400 (ligne var ty). Réduire à 200 pour minimiser le déplacement vertical (utile quand le conteneur est peu haut). |
FAQ
<div class="kt-parallax-layer" data-speed="0.16"> comme premier enfant du conteneur (speed plus élevée = calque encore plus lointain visuellement) et ajoutez la règle CSS :nth-child(4) avec opacité réduite (0.10) et font-size légèrement supérieure. Le JS lit tous les calques via querySelectorAll('.kt-parallax-layer') et les traite automatiquement — aucune modification JS requise.mousemove ne se déclenche pas au toucher. Pour activer le parallaxe sur mobile, ajoutez un écouteur touchmove qui alimente les mêmes variables x/y, ou un écouteur deviceorientation basé sur l'inclinaison du gyroscope. Sans cela, les calques restent à leur position initiale — le texte est lisible mais statique..kt-parallax-layer est un div HTML indépendant. Placez des mots, tailles ou même des images différents dans chaque calque. L'effet de profondeur naît uniquement de la vitesse de déplacement (data-speed), pas de la répétition du même texte — vous pouvez créer un mot principal au premier plan et un mot secondaire en arrière-plan.
