Fluid X-Ray Reveal
Le curseur déclenche un masque CSS radial-gradient mis à jour en temps réel — une traînée de 22 cercles en fondu révèle progressivement une couche cachée sous la première. L'anneau et l'indicateur disparaissent dès le premier survol. Mouvement réduit géré : la couche cachée s'affiche d'emblée.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0776-root centre la scène .xr-scene[data-xr], dont l'attribut data-base renseigne le contenu de la couche visible (.xr-base) et data-xray celui de la couche cachée (.xr-xray). Les deux couches sont empilées en position: absolute; inset: 0 ; la couche cachée a un z-index supérieur et est masquée par son mask-image initial à rayon 0 hors écran.
Le script maintient une traînée de 22 points (trail) : à chaque trame, le point lissé (smooth) avance vers la position de souris par un LERP de 0,18. La vélocité locale détermine le rayon de chaque cercle (entre 66 et 220 px). La traînée est convertie en une série de radial-gradient(circle …) fusionnés par mask-composite: add, ce qui crée un masque fluide multi-cercles. L'opacité de chaque point de la traînée décroît de 0,02 par trame jusqu'à 0, puis le point est retiré.
Un anneau visuel (.xr-ring) et un indicateur (.xr-hint) guident l'utilisateur avant le premier survol ; ils disparaissent dès que le pointeur entre dans la scène. Sous prefers-reduced-motion: reduce, la couche cachée s'affiche intégralement sans boucle (xr-revealed). La scène répond à pointermove (souris et toucher via l'API Pointer Events).
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la classexr-revealedest ajoutée immédiatement, le masque est retiré et la couche cachée s'affiche en entier sans boucle. L'indicateur et l'anneau sont masqués. - Toucher : l'effet utilise
pointermove, qui couvre la souris, le stylet et le toucher. Sur un écran tactile, glisser le doigt dans la zone révèle la couche cachée. Sur Safari iOS (< 17),pointermovelors d'un toucher peut nécessiter un appui maintenu — à tester sur appareil réel. - Clavier : aucune interaction clavier n'est prévue. La couche cachée n'est pas accessible sans pointeur. Si les deux couches portent une information fonctionnelle, exposez le contenu des deux couches en texte alternatif (
aria-label) ou en éléments visibles à côté. - Contenu des couches : les deux couches sont lues par les lecteurs d'écran dans l'ordre du HTML (base puis x-ray). Si les deux couches portent la même information (avant/après), indiquez le changement dans un texte accessible (
aria-live).
Compatibilité navigateur
CSS mask-image avec mask-composite: add + WebkitMaskComposite: source-over + API Pointer Events + matchMedia, aucune dépendance. mask-composite: add disponible depuis Chrome 120, Firefox 53 et Safari 15.4 (avec préfixe -webkit-mask-composite: source-over pour les versions antérieures). Non mesuré dans Firefox et WebKit.
Sans JavaScript, le masque reste à son état initial (rayon 0, couche cachée non visible). Sur Chrome < 120 et Firefox < 53, mask-composite: add n'est pas supporté : le masque multi-cercles n'est pas rendu ; seul le dernier cercle de la traînée est appliqué.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0776-root"><div class="xr-scene" data-xr="" data-base="🧑" data-xray="🧛"><div class="xr-layer xr-base">🧑</div><div class="xr-layer xr-xray">🧛</div><div class="xr-ring"></div><div class="xr-hint">Texte d'aide</div></div></div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Rayon du masque (JS — RADIUS = 110) |
110 px | 60 px pour un révélateur ponctuel et précis, 180 px pour un révélateur plus large. |
Longueur de la traînée (JS — TRAIL = 22) |
22 points | 10 points pour une traînée courte et discrète, 35 pour un effet de pinceau plus persistant. |
Vitesse d'effacement (JS — FADE = 0.02) |
0,02 par trame | 0,01 pour que la traînée disparaisse lentement, 0,05 pour qu'elle s'efface presque instantanément. |
Contenu des couches (HTML — data-base et data-xray) |
Emojis 🧑 et 🧛 | Passez des URLs d'images ou des chaînes HTML. Pour des images, ajoutez un background-image sur les couches .xr-base et .xr-xray en CSS et laissez data-base / data-xray vides. |
Couleur de l'anneau et de l'indicateur (CSS — rgba(124, 255, 170, …)) |
Vert clair #7cffaa |
Remplacez par votre couleur primaire pour intégrer l'effet à votre charte graphique. |
FAQ
background-image, background-size: cover et background-position: center sur les couches .xr-base et .xr-xray en CSS, et laissez data-base / data-xray vides — le script ne modifie que le textContent de ces couches quand les attributs ne sont pas vides.mask-composite: add est supporté depuis Chrome 120, Firefox 53 et Safari 15.4. Sur des versions antérieures, le masque n'applique que le dernier cercle de la traînée — l'effet est moins fluide mais reste fonctionnel.pointermove par pointerdown et retirez la mise à jour continue : ajoutez la classe xr-revealed au clic (scene.addEventListener('click', () => scene.classList.add('xr-revealed'))).
