Responsive Pricing Table
Trois offres tarifaires qui s'empilent, montrent leurs avantages puis se placent côte à côte selon la largeur de leur zone, en glissant vers leur nouvelle place.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
.fx-0763-root est le conteneur mesuré (container: rpt / inline-size). Moins de 280 px : cartes empilées, réduites au nom, au prix et au bouton. De 280 à 399 px : la liste .rpt-features apparaît dans un fondu de 0,4 s et le prix passe de 1,3 à 1,6 rem. À partir de 400 px : les trois cartes se rangent sur une ligne, boutons alignés en bas.
Le passage d'un palier à l'autre est animé par le script : un ResizeObserver suit chaque racine, repère le changement (nombre de colonnes ou apparition de la liste) et applique la technique FLIP. Chaque carte repart visuellement de son ancienne position puis glisse vers la nouvelle grâce à la classe .rpt-move (transition de transform de 0,45 s). Les fonds des cartes sont opaques pour qu'une carte qui en croise une autre la masque proprement.
L'offre mise en avant porte .rpt-popular (bordure #6366f1, bouton #5f63f0, un peu plus foncé pour que son texte blanc atteigne 4,6:1 de contraste). Les boutons sont de vrais <button type="button"> : branchez-les sur votre page de paiement ou remplacez-les par des liens.
Accessibilité
- Boutons nommés : chaque bouton garde son texte visible (« Choisir ») et reçoit un
aria-labelqui le complète (« Choisir l'offre Starter ») pour qu'une liste de boutons reste compréhensible hors contexte. - Focus visible : contour
#a5b4fcde 2 px au clavier (:focus-visible). Sur Safari macOS, la touche Tab n'atteint les boutons que si l'option clavier du système l'autorise. - Mouvement réduit : avec
prefers-reduced-motion: reduce, ni glissement des cartes, ni fondu de la liste, ni agrandissement du bouton au survol ; les paliers changent instantanément. - Avantages cachés en petit : sous 280 px, la liste est en
display:none, donc absente aussi pour les lecteurs d'écran ; si une offre se distingue par ses avantages, gardez une version courte dans le nom ou le bouton.
Compatibilité navigateur
Requêtes de conteneur (Chrome 105, Firefox 110, Safari 16), ResizeObserver et animation CSS, d'après @mdn/browser-compat-data 8.1.8. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 1 colonne sans avantages à 220 px, 1 colonne avec avantages à 300 px, 3 colonnes à 400 et 600 px ; au changement de palier, les 3 cartes de la copie redimensionnée glissent (en mouvement à 30 et 150 ms, posées à 700 ms) et la copie voisine ne bouge pas.
Sans JavaScript, les paliers fonctionnent mais les cartes changent de place d'un coup. Sans @container, les offres restent empilées et compactes, boutons utilisables.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0763-root">
<div class="rpt-grid">
<div class="rpt-card">
<h5>…</h5>
<div class="rpt-price">…<small>/mois</small></div>
<ul class="rpt-features"><li>…</li></ul>
<button type="button" class="rpt-cta" aria-label="…">…</button>
</div>
<div class="rpt-card rpt-popular">…</div>
<div class="rpt-card">…</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 |
|---|---|---|
Paliers (CSS — @container rpt (min-width: 280px) et (min-width: 400px)) |
Avantages à 280 px, trois colonnes à 400 px | Avec des avantages longs, montez le palier des colonnes à 480 px ; le script suit tout changement de palier sans réglage. |
Glissement (CSS — .rpt-card.rpt-move { transition }) |
transform .45s cubic-bezier(.4, 0, .2, 1) |
Raccourcissez à 0,3 s pour une grille d'offres dans un tiroir qui s'ouvre vite. |
Fondu de la liste (CSS — @keyframes rpt-apparait) |
0,4 s, de l'opacité 0 et 4 px plus haut | Supprimez animation sur .rpt-features pour une apparition sèche. |
Offre mise en avant (HTML — classe rpt-popular) |
Sur l'offre du milieu | Déplacez la classe sur une autre carte ; bordure, fond et bouton suivent. |
Couleurs (CSS — .rpt-price, .rpt-popular, fonds #16161b / #131326) |
Prix #8b5cf6, bordure #6366f1, bouton mis en avant #5f63f0 |
Gardez des fonds de carte opaques : avec un fond transparent, les cartes laisseraient voir leurs voisines pendant le glissement. |
Textes et boutons (HTML — h5, .rpt-price, li, aria-label) |
Starter 9 €, Pro 29 €, Enterprise 99 € | Changez le texte visible et l'aria-label ensemble pour que le nom lu commence toujours par le mot affiché. |
FAQ
repeat(4, 1fr) avec un seuil plus haut (520 px environ). Le glissement s'applique à toutes les cartes de la grille.<button> par un lien <a> avec la même classe.
