Circular Reveal
Une face cachée qui s'ouvre dans un cercle né sous le pointeur, puis le suit tant qu'il reste sur la carte. Souris, doigt et clavier.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La carte .cvr-card superpose une face visible, .cvr-front, et une face à dévoiler, .cvr-back. Le contenu des deux est libre : texte, liste, bouton, ou image avec la classe .cvr-media, qui couvre alors toute la face. La face cachée est découpée par clip-path: circle(0% at var(--cvr-x) var(--cvr-y)) : un cercle sans rayon dont le centre est donné par deux variables.
Quand la souris entre, le script mesure le point d'entrée dans la carte (en pourcentage), y place le centre du cercle sans l'animer, puis ajoute la classe .cvr-on : le rayon passe à --cvr-size (100 % par défaut) en 0,4 s. Le cercle jaillit donc exactement de l'endroit où arrive le pointeur — par la gauche, il s'ouvre à gauche ; par le bas, en bas. Pendant le survol, chaque déplacement met à jour le centre et le cercle le rattrape en douceur. À la sortie, il se referme vers le point par lequel la souris est partie.
Au doigt, un tap ouvre le cercle à l'endroit touché et un second tap le referme ; un lien ou un bouton touché dans la carte garde son action. Au clavier, le focus de la carte (:focus-visible) ou d'un élément focusable qu'elle contient (:has(:focus-visible)) l'ouvre aussi, depuis le dernier point connu (le centre si la souris n'est jamais passée).
Le script traite toutes les .cvr-card des racines .fx-0622-root de la page, chacune avec ses propres coordonnées posées en style sur la carte : plusieurs cartes dans une racine, ou plusieurs copies de l'effet, fonctionnent sans se gêner. Aucun nom n'est ajouté sur window.
Accessibilité
- Clavier : au Tab, la carte (
tabindex="0"dans la démo) s'ouvre et prend un contour#67e8f9. Sur un<a>ou un<button>, retireztabindex. - Lecteurs d'écran : la face cachée reste dans la page et elle est lue. Quand elle répète la face visible (libellé de menu en double, par exemple), mettez
aria-hidden="true"sur.cvr-back. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le cercle n'est plus animé ; la face cachée s'affiche d'un coup, entière, puis se cache d'un coup. - Toucher : un tap ouvre depuis le doigt, un deuxième referme. Le doigt qui glisse pour faire défiler la page ne déclenche rien.
- Sans JavaScript : le survol ne fait plus rien, mais le focus clavier ouvre encore la carte (depuis le centre) et le contenu caché reste lisible par les lecteurs d'écran.
Compatibilité navigateur
Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies dans la page (survol de la 2e copie par la gauche : centre du cercle relevé entre 7 et 9 % du bord gauche dans les trois moteurs), Tab, tap qui ouvre puis referme, rendu immédiat en mouvement réduit, rien qui déborde à 390 px. :focus-visible et :has() fixent les versions minimales.
Avant ces versions, la souris et le doigt fonctionnent dans les versions plus anciennes qui ont la propriété inset (Chrome 87, Firefox 66, Safari 14.1 : versions où arrive la propriété inset qui superpose les faces) ; seule l'ouverture au clavier manque.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0622-root">
<div class="cvr-card" tabindex="0">
<span class="cvr-front">Survolez et bougez</span>
<div class="cvr-back">
<span>Magique !</span>
</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 |
|---|---|---|
--cvr-w |
280px |
Largeur de la carte, bornée par son conteneur (100% pour une ligne de menu ou une carte). |
--cvr-h |
180px |
Hauteur de la carte. |
--cvr-radius |
1rem |
Arrondi des coins. |
--cvr-front et --cvr-front-color |
#1a1a24 et #fff |
Fond et texte de la face visible. |
--cvr-back et --cvr-back-color |
linear-gradient(135deg,#06b6d4,#3b82f6) et #fff |
Fond et texte de la face dévoilée ; une valeur par carte permet des couleurs différentes dans la même racine. |
--cvr-size |
100% |
Rayon final du cercle. À 100 %, une entrée par un coin laisse le coin opposé caché ; 150 % couvre toujours tout ; 60 à 75 % donne un disque qui suit le pointeur. |
--cvr-speed |
.4s |
Durée d'ouverture et de fermeture, et douceur avec laquelle le cercle rattrape le pointeur. |
--cvr-bg et --cvr-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine (transparent et 0 pour l'intégrer à une page). |
Classe .cvr-on |
posée par le script | État ouvert. Le script l'ajoute à l'entrée du pointeur ou au tap ; vous pouvez l'ajouter vous-même, le cercle part alors des dernières coordonnées connues. |
FAQ
--cvr-size:150% sur la racine ou sur la carte pour que le cercle couvre toujours tout.<img class="cvr-media" src="…" alt="…"> dans .cvr-back. Elle remplit la face (object-fit: cover) ; un texte placé après elle s'affiche par-dessus. Le même principe marche pour un SVG, comme le plan des prix de l'exemple.
