Split Reveal
Deux volets qui se replient vers les bords et découvrent le contenu du milieu : au survol, au focus, au tap, ou quand votre script le décide.
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 .spr-card contient trois couches : .spr-center, le contenu à découvrir, puis deux volets, .spr-left et .spr-right, qui en couvrent chacun une moitié. Les volets sont découpés par clip-path: polygon(…). À l'ouverture, le volet gauche se resserre vers le bord gauche et le droit vers le bord droit, en 0,5 s avec la courbe cubic-bezier(.4,0,.2,1) : le centre apparaît comme entre deux battants. Les volets ne glissent pas, ils se replient ; leur contenu est rogné sur place.
Toutes les couches acceptent votre contenu. Une image ou un SVG avec la classe .spr-media remplit .spr-center. Dans les volets, la même classe donne à l'image le double de leur largeur, calée à gauche dans le volet gauche et à droite dans le volet droit : en mettant la même image dans les deux, elle paraît d'un seul tenant au repos, puis se fend en deux à l'ouverture.
Déclencheurs : le survol (seulement sur les appareils qui survolent, @media (hover: hover)), le focus clavier de la carte ou d'un élément qu'elle contient, et la classe .spr-open. Sur écran tactile, un tap la bascule (ouvre, puis referme au tap suivant) ; un lien ou un bouton touché dans la carte garde son action. Ajoutez .spr-manual à la carte pour couper survol, focus et tap : elle ne s'ouvre plus que lorsque votre script pose .spr-open, par exemple après une réponse validée.
Accessibilité
- Clavier : la carte de démonstration (
tabindex="0") s'ouvre au Tab avec un contour#c4b5fd. Sur un<button>ou un<a>, retireztabindex. Une carte.spr-manualn'a pas besoin d'être focusable : c'est le bouton qui pose la classe qui l'est. - Lecteurs d'écran : le contenu central est toujours présent dans la page et lu, même volets fermés. Les volets décoratifs (ou qui répètent une image) prennent
aria-hidden="true". Pour une réponse de quiz, annoncez le résultat dans une zonearia-livede votre page : l'ouverture des volets, elle, ne s'entend pas. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les volets disparaissent d'un coup et le centre s'affiche entier, sans animation. - Toucher : un tap ouvre, un deuxième referme ; le survol n'est plus « collé » après un tap.
Compatibilité navigateur
Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, ouverture au survol, au Tab et au tap (le 2e tap referme, aussi quand le code est collé deux fois), état final immédiat en mouvement réduit, rien qui déborde à 390 px. Versions minimales dues à :focus-visible et :has().
Navigateurs plus anciens : survol, tap et classe .spr-open marchent 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) ; le focus clavier n'ouvre plus la carte. Sans JavaScript, seul le tap manque.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0626-root">
<div class="spr-card" tabindex="0">
<span class="spr-center">CENTRE</span>
<div class="spr-left">
<span>GAUCHE</span>
</div>
<div class="spr-right">
<span>DROITE</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 |
|---|---|---|
--spr-w |
280px |
Largeur de la carte, bornée par son conteneur. |
--spr-h |
180px |
Hauteur de la carte. |
--spr-radius |
1rem |
Arrondi des coins. |
--spr-center et --spr-center-color |
#1a1a24 et #fff |
Fond et texte du contenu découvert. |
--spr-left |
linear-gradient(135deg,#6366f1,#8b5cf6) |
Fond du volet gauche (couleur, dégradé, motif). |
--spr-right |
linear-gradient(135deg,#d946ef,#f43f5e) |
Fond du volet droit. Donnez-lui la même valeur que le gauche pour un seul aplat fendu au milieu. |
--spr-speed |
.5s |
Durée d'ouverture et de fermeture. |
--spr-bg et --spr-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine (transparent et 0 dans une page). |
Classes .spr-open et .spr-manual |
absentes | .spr-open ouvre la carte (posée au tap, ou par votre script). .spr-manual réserve l'ouverture à votre script. |
FAQ
<img class="spr-media" src="couverture.jpg" alt=""> dans .spr-left et dans .spr-right. Elle y prend le double de la largeur du volet, calée du bon côté : au repos, on voit une seule photo ; à l'ouverture, chaque moitié part de son côté. Le texte alternatif reste vide sur ces copies (et aria-hidden sur les volets).spr-manual à la carte pour qu'elle ignore survol et focus, puis, dans votre gestionnaire de clic : carte.classList.add('spr-open'). Retirez la classe pour refermer.height: 50%) et faire replier leurs polygones vers le haut et vers le bas.
