Scroll Weight
Poids typographique animé de 100 à 900 par le scroll natif du navigateur — animation-timeline: scroll(), zéro JavaScript.
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. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
animation-timeline: scroll() (CSS Scroll-driven Animations, niveau 1) lie la progression d'une @keyframes au défilement d'un scroll container, sans requestAnimationFrame ni événement JavaScript. Sur .vf-scroll-text, la déclaration cible automatiquement l'ancêtre le plus proche marqué comme scroll container — ici .vf-scroll-container (overflow-y: auto). Le navigateur traduit la position de défilement (0 % en haut, 100 % en bas) en état d'animation sur le thread compositor, hors thread principal.
L'animation vfScrollWeight est un aller-retour symétrique en trois étapes : à 0 % (pas de scroll), font-weight: 100, letter-spacing: 8px, opacity: 0,4 ; à 50 % (mi-scroll), font-weight: 900, letter-spacing: -2px, opacity: 1 ; à 100 % (fin), retour à l'état initial. Le poids monte puis redescend en miroir — l'interpolation entre 100 et 900 est lisse avec une police variable couvrant l'axe de graisse complet.
Le texte est positionné en sticky au centre vertical de .vf-scroll-container — il reste visible pendant tout le défilement malgré les 800 px de hauteur de .vf-scroll-content. La zone de défilement effective (800 − 280 = 520 px) détermine l'amplitude et la « durée » perçue de la transformation.
Si animation-timeline n'est pas supporté, font-weight reste figé à 100 — le texte est lisible mais statique. Aucune erreur JavaScript n'est déclenchée puisque l'effet est entièrement CSS.
Accessibilité
- prefers-reduced-motion : absent du code. Aucune règle
@media (prefers-reduced-motion: reduce)n'est définie — l'animation reste active même si l'OS a demandé à réduire le mouvement. À ajouter si besoin :@media (prefers-reduced-motion: reduce) { .vf-scroll-text { animation: none; font-weight: 400; } }. - Pas d'attribut ARIA dans la structure fournie — ni
role, niaria-labelsur le conteneur. À intégrer si la scène constitue le seul contenu sémantique d'une section. - Contraste : le texte blanc (
#fff) sur fond#0a0a0fatteint un ratio > 18:1 — y compris àopacity: 0,4(ratio effectif ~7:1), bien au-dessus du seuil WCAG AA (4,5:1). - La lisibilité du texte est maintenue à toutes les graisses : même à
font-weight: 100, le mot reste perceptible sur fond sombre. - Aucun élément interactif n'est introduit — aucune interaction clavier ni focus à gérer pour l'effet lui-même.
Compatibilité navigateur
Nécessite animation-timeline: scroll() (CSS Scroll-driven Animations, Niveau 1). Aucune dépendance JavaScript.
Sur Safari < 17.2 et Firefox < 114, <code>font-weight</code> reste figé à <code>100</code> — texte visible mais statique. Aucune erreur JS (effet 100 % CSS).
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-preview">
<div class="vf-scroll-container">
<div class="vf-scroll-content">
<span class="vf-scroll-text">VOTRE TEXTE</span>
</div>
</div>
<span class="vf-scroll-hint">Scrollez ↓</span>
</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 |
|---|---|---|
| font-size sur .vf-scroll-text | 3rem | Taille du texte animé. Grande pour un hero (5–8 rem), petite pour une intégration dans un composant (1–1,5 rem). |
| font-family sur .vf-scroll-text | Inter, sans-serif | Police. Doit couvrir les graisses 100–900 pour une interpolation lisse — police variable recommandée (Inter Variable, DM Sans, Plus Jakarta Sans, system-ui). |
| color sur .vf-scroll-text | #fff | Couleur du texte. Adaptez à votre palette — le contraste est maintenu sur fond sombre à toute graisse. |
| font-weight à 0 % et 100 % dans @keyframes vfScrollWeight | 100 | Graisse de départ (pas de scroll) et de fin (scroll complet). Montez à 300 pour un départ moins extrême. |
| font-weight à 50 % dans @keyframes vfScrollWeight | 900 | Graisse maximale au mi-scroll. 700 = Bold classique, 900 = Black — selon les axes de votre police variable. |
| letter-spacing dans @keyframes vfScrollWeight | 8px → -2px | Espacement de départ et de fin. Réduisez à 2px → 0px pour des titres multi-mots lisibles à toutes les étapes. |
| height sur .vf-scroll-container | 280px | Hauteur de la zone de défilement visible. Augmentez pour une section hero, réduisez pour un composant compact. |
| height sur .vf-scroll-content | 800px | Hauteur totale du contenu défilable. L'amplitude utile (800 − 280 = 520 px) détermine l'effort de scroll pour traverser l'animation. Réduisez à 400px pour un déclenchement plus rapide. |
FAQ
font-weight: 100 — lisible mais sans animation. Aucune erreur JavaScript n'est déclenchée car l'effet est 100 % CSS.animation-timeline: scroll() par animation-timeline: scroll(root) sur .vf-scroll-text, et retirez overflow-y: auto du conteneur. Le texte s'animera alors en fonction du scroll global de la page — plus besoin de .vf-scroll-content surdimensionné.wght 100–900 donne une interpolation continue et pixel-parfaite.
