Dynamic Aspect Ratio
Zone média qui choisit son format selon la largeur disponible — carré, 4:3, 16:9 puis 21:9 — avec un badge qui affiche le format réellement appliqué.
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-0764-root est un conteneur transparent (container: dar-media / inline-size) qui prend toute la largeur. La zone .dar-media a des coins de 10 px, un libellé centré et un dégradé cyan → bleu → violet deux fois plus grand qu'elle, dont la position glisse en boucle sur 6 s (@keyframes dar-shift). Sa hauteur découle uniquement de aspect-ratio, qui vaut 1 / 1 au départ.
Trois paliers @container dar-media changent le format : 4 / 3 dès 300 px, 16 / 9 dès 450 px, 21 / 9 dès 600 px. Le libellé grossit en même temps (de 0,85 à 1,4 rem). Le changement de format est animé en 0,5 s : mesuré, la zone passe progressivement de la hauteur carrée à la hauteur 16:9 dans les trois moteurs testés.
Le badge .dar-badge est vide dans le HTML ; son texte vient de ::before, redéfini dans chaque palier (content: "16:9"…). Il est donc toujours juste, quelle que soit la façon dont la largeur change, et sans script. Pour un vrai média, posez votre image ou vidéo en fond de .dar-media, ou placez un <img> / <video> dedans en object-fit: cover.
Accessibilité
- Badge lu : le texte généré par
::beforefait partie du nom lu par les lecteurs d'écran récents (« 16:9 »). S'il n'apporte rien à votre public, ajoutezaria-hidden="true"sur le badge. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le dégradé ne défile plus (il reste affiché, immobile) et les changements de format et de libellé se font sans transition. - Contraste : libellé blanc ombré sur le dégradé par défaut : 4,6:1 au moins sur ses trois couleurs, mesuré dans Chromium, Firefox et WebKit à plusieurs instants de l'animation ; badge blanc sur voile noir à 45 %. Avec une photo claire derrière, foncez-la ou renforcez le voile du badge.
- Média à décrire : la zone est une
div; si vous y mettez une image porteuse de sens, utilisez un<img alt="…">plutôt qu'un fond CSS.
Compatibilité navigateur
Requêtes de conteneur, aspect-ratio (Chrome 88, Firefox 89, Safari 15) et animation CSS. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 1:1 jusqu'à 260 px, 4:3 de 300 à 430, 16:9 à 520, 21:9 à 620 et 800 px, badge identique au format affiché à chaque fois.
Sans @container, la zone reste carrée et le badge affiche « 1:1 », ce qui reste exact.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0764-root">
<div class="dar-media">
<span class="dar-label">Dynamic Ratio</span>
<span class="dar-badge"></span>
</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 et formats (CSS — @container dar-media (min-width: …) et aspect-ratio) |
1:1, 4:3 dès 300, 16:9 dès 450, 21:9 dès 600 px | Changez chaque aspect-ratio et le content du badge dans la même règle pour qu'ils restent d'accord (ex. 3:2 au lieu de 4:3). |
Visuel (CSS ou HTML — .dar-media) |
Dégradé #048096 → #1b6df5 → #8453f5, animé |
Pour une photo, remplacez le fond par url(…) center / cover et retirez animation. |
Vitesse du dégradé (CSS — animation: dar-shift 6s) |
6 s, en boucle | 12 s pour un mouvement à peine perceptible, none pour un fond fixe. |
Badge (HTML/CSS — .dar-badge) |
Visible, en haut à droite | Supprimez la balise pour un média sans indication, ou déplacez-le avec top/left. |
Libellé (HTML — .dar-label) |
« Dynamic Ratio » | Mettez le titre de la vidéo, ou retirez-le pour une image seule. |
Durée de la transition de format (CSS — transition: aspect-ratio .5s) |
0,5 s | none si la zone est dans une liste qui se redimensionne souvent. |
FAQ
<video> dans .dar-media avec position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover. La zone garde le format calculé et la vidéo est recadrée dedans.
