Gravity Drop Text
Les lettres se détachent du haut de la scène, accélèrent sous la gravité et rebondissent sur la ligne de base avant de se poser — physique pure, zéro librairie.
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
La fonction splitChars() lit l'attribut data-text du conteneur et génère un <span class="char" data-char="…"> par lettre. Chaque span est un display: inline-block — condition nécessaire pour que transform s'applique individuellement.
Une boucle requestAnimationFrame anime chaque lettre séparément. La vélocité verticale augmente chaque frame d'une constante de gravité (g ≈ 0,60 px/frame). La position est appliquée via style.transform = 'translateY(' + y + 'px)' en inline — aucune transition CSS n'est impliquée. Chaque lettre part à translateY(-220px), opacity: 0, et devient visible dès son premier frame actif.
À l'impact (y ≥ 0), la vélocité est inversée avec amortissement (vy = −vy × 0,45) — la lettre rebondit vers le haut puis retombe avec des arcs progressivement plus courts jusqu'au repos. Le keyframe CSS @keyframes ktElastic (scaleY(0) scaleX(1.8) → scaleY(1) scaleX(1)) est disponible pour ajouter un squash & stretch à l'atterrissage via la classe active.
Les lettres démarrent en cascade avec un stagger de ~90 ms par lettre — les premières atterrissent avant que les dernières n'aient commencé à tomber. Un click listener sur le conteneur remet toutes les lettres à la position haute et relance la boucle RAF.
Accessibilité
prefers-reduced-motion: absent du code — aucune branche n'arrête ou ne réduit l'animation. À implémenter : détectermatchMedia('(prefers-reduced-motion: reduce)').matcheset passer directement les lettres àtranslateY(0)sans RAF.- Le texte reste dans le DOM en
<span>lisibles — les lecteurs d'écran accèdent au contenu indépendamment de l'animation. user-select: nonesur.kt-text— les lettres ne sont pas sélectionnables au curseur ; non bloquant pour les lecteurs d'écran.- Contraste : texte blanc (#fff) sur fond sombre (#0a0a0f) — ratio ≥ 7:1, WCAG AAA.
- Le conteneur
.kt-gravityest cliquable mais sansrole="button"nitabindex— la fonctionnalité « cliquer pour relancer » n'est pas accessible au clavier ; à compléter si nécessaire.
Compatibilité navigateur
Nécessite CSS Transforms et requestAnimationFrame — supportés dans tous les navigateurs modernes. Zéro dépendance externe.
Sans JS, les lettres restent invisibles (<code>opacity: 0</code> posé par <code>.kt-gravity .char</code>). Ajouter une règle CSS de repli ou un <code><noscript></code> si les visiteurs sans JS sont ciblés.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="kt-text kt-gravity" id="gravity1" data-text="VOTRE TEXTE" style="cursor: pointer;">
<!-- splitChars() génère un <span> par lettre -->
<span class="char" data-char="V">V</span>
<span class="char" data-char="O">O</span>
<span class="char" data-char="T">T</span>
<span class="char" data-char="R">R</span>
<span class="char" data-char="E">E</span>
</div>
<span class="demo-hint">Cliquer pour relancer</span>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 |
|---|---|---|
| data-text | GRAVITY | Texte à animer — modifiez la valeur sur l'élément .kt-gravity pour changer le mot sans toucher au JS. |
| font-size sur .kt-text | 2.2rem | Taille des lettres. Montez à 3–5rem pour un impact hero ; descendez à 1.5rem pour une intégration discrète dans une UI. |
| color sur .kt-text | #fff | Couleur des lettres. Accepte toute valeur CSS — un dégradé via background-clip: text est possible sur le parent. |
| font-weight sur .kt-text | 800 | Graisse. 900 + police condensée maximise la sensation de masse à l'atterrissage. |
| letter-spacing sur .kt-text | 0.02em | Espacement entre lettres. 0 ou négatif pour un mot serré ; 0.1–0.2em pour l'aérer. |
| constante g (script) | 0.60 | Accélération gravitationnelle en px/frame². Augmentez à 0.8–1.0 pour un impact brutal ; réduisez à 0.3–0.4 pour un effet lunaire. |
| amortissement rebond (script) | 0.45 | Coefficient de restitution (0 = pas de rebond, 1 = rebond parfait). 0.3 = un rebond sec, 0.6 = plusieurs rebonds visibles. |
| stagger (script) | 90 ms | Délai entre le démarrage de chaque lettre. 50 ms = cascade rapide, 150 ms = chaque lettre atterrit avant que la suivante ne commence. |
FAQ
.kt-gravity que nécessaire, chacun avec un id unique. Appelez la logique d'initialisation une fois par élément — la boucle RAF tourne indépendamment pour chaque instance.font-family sur .kt-text. Précaution : chargez la police avant de démarrer le RAF (écoutez document.fonts.ready) pour éviter un flash de police pendant les premiers frames de l'animation.0 dans le script : la lettre s'arrête nette à la ligne de base sans repartir. Activez alors ktElastic (squash & stretch CSS) à l'atterrissage pour simuler un impact sans rebond cinétique.
