Card Vanish
Au retrait, la carte se découpe en 24 tuiles qui s'envolent chacune vers un point tiré au hasard, en diagonale depuis le coin haut gauche (0,8 s) ; au retour, les tuiles reviennent et la carte se recompose avec un rebond (0,6 s). Des div et des images clés CSS, sans canvas : 2,4 Ko de JavaScript, simple fondu de 150 ms si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La carte .cv-card (160 × 100 px, coins de 14 px, dégradé #6366f1 → #8b5cf6) est posée dans .cv-wrapper, qui sert de repère aux tuiles ; le bloc .cv-root déclare son fond #0a0a0f et place le bouton dessous. Un clic sur .cv-btn alterne les deux sens : dissoudre, puis recomposer. L'état atteint tient : mesurée 1,45 s puis 3,45 s après le clic, la carte dissoute reste à opacité 0, et la carte recomposée reste pleine jusqu'au clic suivant.
Pour dissoudre, le script lit la taille de la carte et crée une grille de 6 × 4 div.cv-particle (26,7 × 25 px pour la carte de démonstration), chacune peinte avec le même dégradé. Chaque tuile reçoit deux variables, --tx et --ty, tirées au hasard entre −100 et 100 px, et un retard de 30 ms par rang et par colonne : la vague part du coin haut gauche et atteint le coin opposé 240 ms plus tard. L'animation cvDissolve (0,8 s, cubic-bezier(.25, .46, .45, .94)) les emmène à translate(var(--tx), var(--ty)) scale(0) en les effaçant. Pendant ce temps, la carte passe à opacité 0 et échelle 0,95 en 0,3 s, puis devient visibility: hidden à la fin du fondu. Les tuiles sont retirées du DOM après une seconde.
Le retour fait le chemin inverse : 24 nouvelles tuiles partent de points tirés au hasard et rejoignent leur case en 0,6 s (cvMaterialize), pendant que la carte revient avec cvCardIn, de l'échelle 0,8 à 1 sur une courbe qui dépasse (cubic-bezier(.34, 1.56, .64, 1)). La carte réapparaît donc avant que les tuiles aient fini de converger — mesurée à opacité 0,8 au bout de 150 ms — et les tuiles se posent sur elle. Le script parcourt chaque .cv-root de la page : plusieurs cartes vivent côte à côte, chacune avec son état. Les tuiles portent la couleur de la carte, pas son contenu : le texte s'efface avec la carte, la poussière est faite de morceaux de dégradé.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion, le script ne crée aucune tuile et la carte s'efface ou revient en fondu de 150 ms, sans changement d'échelle — mesuré dans Chromium et Firefox : 0 tuile, opacité 0,3 à 60 ms, 0 à 460 ms. - Carte retirée, carte absente : à la fin du fondu, la carte passe en
visibility: hidden; elle sort de la navigation au clavier et les lecteurs d'écran ne la lisent plus, même si elle contient des liens. Les tuiles sont desdivvides, sans texte. - Annoncer le retrait : le bouton ne dit pas dans quel état est la carte. Dans un vrai usage, changez son libellé après le clic (« Rétablir ») ou posez
aria-pressed, et confirmez l'action dans une zonearia-live(« Réservation annulée »). - Contraste : texte blanc en gras de 14,4 px sur la carte, 4,47:1 sur
#6366f1et 4,2:1 sur#8b5cf6, juste sous le seuil AA de 4,5:1 sur tout le dégradé ; foncez ses deux bouts (#4f46e5→#7c3aed, 6,29:1 et 5,7:1) si la carte porte un texte important.
Compatibilité navigateur
Images clés CSS avec variables (var(--tx) dans @keyframes), transitions et une cinquantaine de lignes de JavaScript, aucune dépendance, aucun canvas. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : 24 tuiles, même vague diagonale, carte à opacité 0 après la dissolution et pleine après la recomposition, aucune tuile sous mouvement réduit. Le script utilise NodeList.forEach, présent depuis Chrome 51, Firefox 50 et Safari 10.
Sans JavaScript, la carte reste affichée et le bouton ne fait rien. Avec le mouvement réduit, la carte disparaît et revient en fondu de 150 ms, sans tuiles.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="cv-root">
<div class="cv-wrapper">
<div class="cv-card">Contenu de la carte</div>
<!-- 24 div.cv-particle ajoutées par le script le temps de l'animation -->
</div>
<button class="cv-btn" type="button">Dissoudre / recomposer</button>
</div>Le code complet HTML + CSS + JS de Card Vanish, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Grille de tuiles (JS — cols = 6, rows = 4) |
6 × 4 = 24 tuiles | Plus de tuiles donnent une poussière plus fine : 10 × 6 = 60 tuiles restent fluides. Au-delà de 150, le navigateur anime beaucoup d'éléments à la fois ; gardez des tuiles d'au moins 10 px. |
Dispersion (JS — * 200) |
±100 px sur chaque axe | * 400 projette les tuiles deux fois plus loin, hors de la carte ; pour une chute, remplacez ty par 60 + Math.random() * 120 (toujours vers le bas). |
Vague (JS — (r + c) * 0.03) |
30 ms par rang, 240 ms d'un coin à l'autre | (rows - 1 - r + c) * 0.03 fait partir la vague du coin bas gauche ; Math.random() * 0.3 donne un éparpillement sans direction. |
Durées (CSS — cvDissolve, cvMaterialize) |
0,8 s et 0,6 s | Avec les 0,8 s d'origine, les dernières tuiles finissent leur course à 1,04 s et le script les retire à 1 s, à 95 % du trajet, déjà presque invisibles. Si vous allongez la dissolution, allongez d'autant le retrait des tuiles (1000 dans le script), sinon elles disparaissent en pleine course. |
Couleur des tuiles (JS — particle.style.background) |
linear-gradient(135deg, #6366f1, #8b5cf6) |
Elle est écrite dans le script, à part de la carte : changez les deux ensemble. Pour reprendre automatiquement la couleur de la carte, écrivez getComputedStyle(card).backgroundImage. |
Profondeur (CSS — .cv-wrapper perspective: 800px) |
déclarée, sans effet visible | Aucune animation ne tourne en 3D, la perspective ne change donc rien. Ajoutez rotateX(60deg) dans la dernière étape de cvDissolve pour que les tuiles basculent en s'envolant. |
FAQ
div peinte avec le dégradé de la carte, pas un morceau de son image. Le texte disparaît avec la carte en 0,3 s, pendant que les tuiles colorées s'envolent ; l'œil lit une carte qui se défait. Découper le vrai rendu demanderait de copier la carte dans un canvas (html2canvas ou similaire), plus lourd et fragile avec les polices et les images d'autres domaines.card.classList.add('cv-vanishing'), ajoutez setTimeout(function () { wrapper.remove(); }, 1000); : la poussière a fini de tomber à une seconde. Dans une liste, retirez plutôt l'élément de liste parent, et faites-le après la réponse de votre serveur si le retrait peut échouer.
