Card Expand to Full
Anime la carte depuis sa position dans le layout jusqu'au plein écran grâce à la technique FLIP — aucun calcul manuel de coordonnées CSS.
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. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'animation repose sur la technique FLIP (First, Last, Invert, Play). Avant tout changement visuel, toggleCardExpand() capture le getBoundingClientRect() de la carte (First), applique ou retire la classe CSS .expanded — ce qui recalcule instantanément la mise en page — puis capture de nouveau le rect (Last).
La fonction calcule l'écart entre les deux états : décalage dx/dy en pixels et ratio scaleX/scaleY entre les dimensions. Elle applique immédiatement un transform: translate(…) scale(…) avec transition: none, ce qui repositionne visuellement la carte à son état initial sans animation (Invert).
Un requestAnimationFrame laisse le navigateur committer ce transform, puis la fonction réactive la transition all 0.6s cubic-bezier(0.4, 0, 0.2, 1) et efface le transform (Play). Le navigateur anime naturellement de l'état inversé jusqu'au zéro — la position CSS finale définie par .expanded — sans qu'aucune coordonnée n'ait été calculée manuellement.
En parallèle, la classe .expanded pilote deux animations CSS indépendantes : le .card-label monte de 20 px via transform: translateY(-20px), et le .card-detail passe de opacity: 0 à 1 avec un délai de 0,3 s — il n'apparaît qu'une fois la carte arrivée en position finale.
Accessibilité
- prefers-reduced-motion absent : la transition de 0,6 s se déclenche même si l'OS signale une préférence pour réduire le mouvement. En production, ajouter
@media (prefers-reduced-motion: reduce) { .expand-card { transition: none !important; } }. - Les boutons Réduire/Développer sont des
<button>natifs — activables au clavier (Espace, Entrée) et exposés aux lecteurs d'écran. - Aucun attribut
aria-expandedsur les boutons : l'état ouvert/fermé de la carte n'est pas signalé aux technologies d'assistance. Recommandé : synchroniseraria-expanded="true/false"dans le callback. - Contraste texte/fond : texte blanc sur dégradé indigo–fuchsia — ratio ≥ 4,5:1, conforme WCAG AA.
- Aucun
roleniaria-labelsur.card-expand-wrapper— il est purement positionnel, ce qui est correct ; le contenu textuel reste accessible via les éléments enfants.
Compatibilité navigateur
Nécessite getBoundingClientRect(), requestAnimationFrame et les transitions CSS — disponibles dans tous les navigateurs modernes depuis 2016.
Sans support des transitions CSS ou de requestAnimationFrame, la classe .expanded change directement les dimensions CSS — la carte se redimensionne instantanément, sans animation.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="morph-toggle-group">
<button class="morph-toggle active" onclick="toggleCardExpand(false, this)">Réduire</button>
<button class="morph-toggle" onclick="toggleCardExpand(true, this)">Développer</button>
</div>
<div class="card-expand-wrapper">
<div class="expand-card" id="expandCard">
<span class="card-label">Titre de la carte</span>
<span class="card-detail">Contenu détaillé visible après expansion.</span>
</div>
</div>
</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 |
|---|---|---|
| .expand-card background | linear-gradient(135deg, #6366f1, #d946ef) | Couleur ou image de fond de la carte. Remplacez par votre palette brand ou une image avec background-size: cover. |
| .expand-card transition (CSS) + chaîne JS "all 0.6s…" | 0.6s cubic-bezier(0.4, 0, 0.2, 1) | Durée et easing. À modifier en deux endroits : propriété transition sur .expand-card en CSS, et la chaîne "all 0.6s…" dans le JS — ils doivent rester synchronisés. |
| .expand-card width / height (état compact) | 80px / 60px | Dimensions de la carte compacte avant expansion. Mettez-les à l'échelle de votre vignette dans le layout existant. |
| .expand-card top / left (état compact) | 50px / calc(50% − 40px) | Position initiale dans le conteneur .card-expand-wrapper. Ajustez pour coller à la position de l'élément source dans votre grille. |
| .expand-card border-radius | 10px compact → 8px expanded | Rayon des coins compact (.expand-card) et étendu (.expand-card.expanded). Modifiez-les en cohérence pour conserver un arrondi cohérent. |
| .expand-card .card-detail transition-delay | 0.3s (dans opacity .4s .3s) | Délai avant l'apparition du contenu détaillé. Réduire à 0s pour un affichage immédiat ; augmenter si la durée FLIP est plus longue. |
| --primary | #6366f1 | Variable CSS de couleur primaire utilisée pour les boutons toggle et leur focus ring. Définissez-la au niveau :root ou sur le conteneur de l'effet. |
FAQ
toggleCardExpand() cible l'id expandCard codé en dur. Pour plusieurs instances, extrayez la logique en passant l'élément directement : function flipCard(el, expand, btn) { var a = el.getBoundingClientRect(); … } et câblez chaque bouton avec sa propre référence d'élément.getBoundingClientRect() retourne les coordonnées relatives au viewport — le scroll est déjà pris en compte, le calcul reste correct. Attention : si un ancêtre direct de .expand-card possède un transform CSS, il crée un nouveau référentiel de positionnement et décale les calculs d'offset.<body> ou le conteneur au même moment : document.body.classList.toggle('card-open', expand). Pilotez un overlay, un backdrop-filter ou un background-color via cette classe — le timing s'aligne naturellement avec la transition FLIP.
