Text Line Reveal
Chaque mot est un span à animation-timeline: view() : de blanc à 15 % à #e0e7ff entre son entrée par le bas de la boîte (480 × 300 px) et 40 % de sa traversée — allumé à 167 px du haut, quel que soit le nombre de lignes. Six accents marqués en HTML virent au violet. 1,9 Ko de CSS, zéro JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Scroll comprend 70 effets, dont 12 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le HTML vendu (2,4 Ko) : un cadre .demo-preview (flex centré, min-height: 300px, fond #0a0a0f) et une boîte .textline-container — 100% plafonné à max-width: 480px, height: 300px, overflow: hidden auto, padding: 40px 16px — qui contient un espaceur de 60 px, 43 span.textline-word (un mot et son espace par span, inline-block, 1,1 rem graisse 700, interligne 1,8 = 31,7 px), dont 6 en .textline-accent, puis deux espaceurs de 60 px. À côté, l'indice .slr-scroll-hint « Scrollez pour révéler » rebondit de 4 px toutes les 2 s. Aucune dépendance au site, aucun script, aucune erreur console. Mesuré : 7 lignes et 182 px de course à 1 264 px de large, 9 lignes et 245 px à 374 px.
Une règle fait tout : animation-name: textLineFill, animation-timeline: view(), animation-range: entry cover 40%, linear, fill-mode: both, animation-duration: auto. view() crée une timeline de vue anonyme : sujet = le span, défileur = l'ancêtre défilant le plus proche, la boîte. entry 0% est l'instant où le haut du mot touche le bord bas de la boîte ; cover 40%, 40 % de la traversée complète (300 + 31,7 = 331,7 px), soit 132,7 px plus haut. Sur ces 133 px, color va de rgba(255,255,255,.15) à #e0e7ff : un mot est allumé dès que son haut est à 167 px du haut de la boîte, et chaque ligne en dessous perd 0,2 d'opacité — mesuré au repos : 1 / 1 / 1 / 0,82 / 0,62 / 0,42 / 0,21 / 0,15. Les .textline-accent reprennent les mêmes longhands avec textLineFillAccent (rgba(139,92,246,.2) → #a78bfa) : même géométrie, autre couleur, mots choisis dans le HTML.
Pas de ratio global : un mot ne sait rien du reste du texte, il s'allume à 167 px du haut que le texte fasse 3 lignes ou 300, et le défilement arrière le ré-éteint symétriquement. Sans conteneur défilant (retirez height et overflow), view() prend la fenêtre : mesuré dans une page de 800 px, un mot à 700 px du haut est à 0,40, allumé à 400 px. Ni id ni script : deux copies collées fonctionnent côte à côte. Jusqu'au 30/09/2026 la boîte était en height: 100%, qui vaut auto dans une page vierge : course nulle, 43 mots allumés d'emblée — mesuré identique dans l'aperçu du site. Hauteur fixe et plafond de largeur rendent la course réelle partout, rendu du catalogue inchangé.
Accessibilité
- prefers-reduced-motion absent : mesuré sous émulation, rien ne change — l'allumage ne bouge que sous le geste du lecteur (WCAG 2.3.3) et rien n'est caché, un mot non lu est à 15 %, pas à 0 ; seul l'indice rebondit tout seul. Ajoutez
@media (prefers-reduced-motion: reduce) { .slr-scroll-hint { animation: none } }, et pour un texte plat,.textline-word, .textline-accent { animation: none; color: #e0e7ff }. - Clavier : mesuré, Tab donne le focus à la boîte sans
tabindexdans Chromium 151 et Firefox 153, flèche bas avance de 40 px (51 dans Firefox), PageDown et Fin vont au bout. Poseztabindex="0",role="region"et unaria-labelsur.textline-containerpour garantir le focus ailleurs (Safari non mesuré) et nommer la zone. - Contraste : allumé,
#e0e7ffsur#0a0a0ffait 16:1, l'accent#a78bfa7,3:1 ; éteint, le blanc à 15 % rend#2f2f33(1,5:1) et le violet à 20 % 1,2:1 — illisible par construction, mais seulement sous la ligne de lecture. L'indice à 40 % fait 3,8:1. Sans le cadre et son fond sombre, réécrivez les deux keyframes (blanc à 15 % sur blanc : 1:1). - Lecteurs d'écran : des
spandans undiv, lus d'une traite et dans l'ordre, l'espace incluse dans chaque span gardant les mots séparés ; les accents ne sont pas annoncés (<strong>ou<em>s'ils ont un sens). L'indice est lu en français quelle que soit la langue de la page :aria-hidden="true". Sans CSS, un paragraphe ordinaire.
Compatibilité navigateur
CSS seul ; animation-timeline: view(), animation-range et animation-duration: auto font tout. Chrome et Edge 115+, Safari et iOS 26+. Firefox : aucune version — animation-timeline y est ignoré et animation-duration: auto rejeté (calculé 0s, mesuré dans Firefox 153) : l'animation se termine à l'instant, fill-mode: both retient la dernière keyframe et le visiteur voit tout le texte allumé (#e0e7ff, accents #a78bfa) dans une boîte qui défile normalement — lisible, sans révélation. Rien n'est caché, donc pas de repli @supports livré ; pour l'expliciter : @supports not (animation-timeline: view()) { .textline-word, .textline-accent { color: #e0e7ff } }. Zéro dépendance.
Sans animation-timeline (Firefox, Chrome < 115, Safari < 26) : texte entièrement allumé, boîte qui défile, statique. Sans overflow: hidden auto à deux valeurs (avant 2018), la boîte ne défile pas et view() se rattache à la fenêtre. Sans CSS, un paragraphe ordinaire.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="textline-container">
<div class="textline-spacer"></div>
<span class="textline-word">… </span>
<span class="textline-word textline-accent">… </span>
<span class="textline-word">… </span>
…
<div class="textline-spacer"></div>
<div class="textline-spacer"></div>
</div>
<span class="slr-scroll-hint">…</span>
</div>Le code complet HTML + CSS + JS de Text Line Reveal, prêt à coller — et les 811 effets. Ou 299 € une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Boîte (CSS — .textline-container { height: 300px; max-width: 480px }) |
480 × 300 px, padding 40 / 16 px, course 182 px avec les 43 mots vendus | La hauteur place la ligne de lecture (H − 0,4 × (H + 31,7) = 167 px pour 300) ; la largeur fixe le nombre de lignes, donc la course : sans plafond, 43 mots tiennent sur 3 lignes à 1 264 px et il reste 55 px à défiler. Donnez-lui un vrai texte. |
Zone d'allumage (CSS — animation-range: entry cover 40%) |
entry 0% → cover 40% (133 px de transition, ligne allumée à 167 px du haut) | entry cover 25% allume plus bas (216 px), entry cover 60% plus haut (101 px) ; entry 0% entry 100% allume un mot dès qu'il est entré (32 px, net) ; cover 20% cover 60% allume dans une bande centrale. |
Couleurs (CSS — @keyframes textLineFill, textLineFillAccent) |
rgba(255,255,255,.15) → #e0e7ff · rgba(139,92,246,.2) → #a78bfa | Les deux keyframes portent toute la palette : sur fond clair, rgba(42,36,32,.16) → #2a2420 (scène 3) ; opacity, filter: blur() ou transform s'animent au même endroit. Pour en changer sans toucher à la règle vendue, redéclarez seulement animation-name après elle. |
Mots d'accent (HTML — classe textline-accent) |
6 mots sur 43 (scroll-driven, immersives, CSS, JavaScript., viewport., animation-range) | Décision éditoriale prise dans le HTML : ajoutez ou retirez la classe, rien à recalculer. La règle .textline-accent redéclare tous les longhands : une propriété ajoutée à .textline-word doit y être reportée. |
Typographie et granularité (CSS — font-size: 1.1rem; line-height: 1.8 · HTML — un span par mot) |
17,6 px graisse 700, ligne de 31,7 px, un span par mot (espace incluse) | La hauteur de ligne entre dans la traversée (H + h) : ligne de 24 px = transition de 130 px, allumage à 170 px. Les spans d'une même ligne ont la même progression : un span par ligne (chant, poème) ou par groupe (lecture guidée) donne le même allumage avec dix fois moins d'éléments. |
Défileur (CSS — overflow: hidden auto et height sur la boîte) |
La boîte de 300 px | view() prend l'ancêtre défilant le plus proche ; sans height ni overflow, la page devient le défileur (ligne de lecture à 467 px pour une fenêtre de 800 px, mesuré). Piège : animation: textLineFill linear both écrit après animation-timeline remet la timeline à auto et allume tout — raccourci d'abord, timeline ensuite. |
Indice et espaceurs (HTML/CSS — .slr-scroll-hint, .textline-spacer) |
« Scrollez pour révéler » en rebond de 4 px toutes les 2 s · 60 px avant le texte, 120 px après | L'indice est un reste du catalogue : français en dur, absolu par rapport à .demo-preview (sans ce cadre il tombe au bas de la page) — supprimez-le ou traduisez-le. Les espaceurs laissent le premier mot sous la ligne de lecture et font remonter le dernier au-dessus ; 120 px en bas suffisent tout juste. |
FAQ
animation-timeline est ignoré et l'animation saute à sa dernière keyframe — c'est le repli mesuré. La course : le code vendu avant le 30/09/2026 posait height: 100%, qui vaut auto hors d'un parent de hauteur définie, donc rien à défiler ; la version actuelle fixe 300 × 480 px, mais un texte court dans une boîte haute donne le même symptôme (3 lignes = 55 px de course, tout au-dessus de 167 px). Le raccourci : une déclaration animation: … écrite après la règle vendue remet animation-timeline à auto et la durée auto vaut 0 s — même rendu que Firefox. Enfin, un overflow: hidden intermédiaire capte la timeline : la boîte doit être l'ancêtre défilant le plus proche.entry 0% (le haut du mot touche le bord bas de la boîte) à cover 40%, 40 % de la traversée complète, hauteur de la boîte + hauteur du mot. Pour 300 px et une ligne de 31,7 px : 0,4 × 331,7 = 133 px, donc un mot est allumé quand son haut est à 300 − 133 = 167 px du haut, et à 15 % tant qu'il est sous le bord bas ; entre les deux, linéaire, 0,2 d'opacité par ligne (mesuré : 1 / 1 / 1 / 0,82 / 0,62 / 0,42 / 0,21). Pour remonter la ligne de lecture, augmentez le pourcentage de cover ou réduisez la boîte ; pour un allumage plus sec, resserrez la plage (entry 0% entry 100% : 32 px). Le calcul se fait mot par mot, jamais sur la longueur du texte.#e0e7ff, accent #a78bfa — et deux mécaniques opposées. fx-0591 est un script : à chaque événement scroll, ratio = scrollTop ÷ course, les floor(ratio × n) premiers mots passent en .lit, le suivant en .accent, une barre suit, et le texte est épinglé en sticky parce que l'allumage dépend du défilement global : sur un texte plus long que la boîte, il s'allume hors champ. fx-0569 n'a pas de script : chaque mot porte animation-timeline: view() et s'allume à 167 px du haut quelle que soit la longueur du texte ; l'accent est un mot choisi dans le HTML. fx-0591 tourne sur Firefox 32+ et expose un nombre réutilisable ; fx-0569 exige Chrome/Edge 115+ ou Safari 26+, marche hors ligne dans un fichier nu et se colle autant de fois qu'on veut, sans id.
