Letter Slide Up
Chaque lettre surgit du bas avec un décalage régulier — une animation CSS pure qui donne de la profondeur à n'importe quel titre.
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 keyframe slideUpLetter anime chaque lettre de opacity: 0; transform: translateY(100%) à son état naturel en 0,4 s, avec animation-fill-mode: forwards qui maintient chaque lettre visible à l'arrivée. Envelopper chaque caractère dans un <span> en display: inline-block est indispensable : les éléments inline ignorent les transformations CSS.
La fonction splitText(el, text, delay) découpe le texte caractère par caractère et injecte un <span> par lettre dans l'élément cible. Chaque span reçoit un animation-delay de index × delay secondes (0,06 s par défaut). Les espaces incrémentent le compteur sans créer de span, ce qui produit une courte pause dans la cascade — visuellement, les blancs semblent « arriver » aussi.
La rejouer : replaySlideUp() vide le innerHTML, attend 50 ms pour que le navigateur invalide les états d'animation précédents, puis rappelle splitText. À l'état initial, les spans sont pré-fabriqués dans le HTML avec leurs animation-delay en attributs inline — l'animation démarre dès le premier rendu sans aucun appel JS.
Accessibilité
- prefers-reduced-motion absent : aucun bloc
@media (prefers-reduced-motion: reduce)n'est présent dans le CSS livré — l'animation tourne même si l'OS demande une réduction de mouvement. Ajouter ce bloc pour passer les lettres directement àopacity: 1; transform: none. - Le texte animé est du contenu textuel réel, pas un canvas ni une image — les lecteurs d'écran lisent les lettres normalement, aucune balise
aria-*n'est nécessaire. - Le bouton Replay est un
<button>natif, focusable au clavier (Tab + Entrée ou Espace). - Contraste : texte blanc (
#fff) sur fond#0a0a0f, ratio ~21:1 — largement au-dessus du seuil WCAG AA (4,5:1). - Aucun attribut
roleniaria-labeln'est défini par l'effet : le contenu étant du texte lisible, le rendu sémantique natif suffit.
Compatibilité navigateur
Nécessite @keyframes CSS et manipulation DOM basique (innerHTML, createElement) — supportés dans tous les navigateurs modernes. Zéro dépendance externe.
Si les animations CSS ne sont pas supportées (navigateur très ancien), toutes les lettres restent à <code>opacity: 0</code> — le texte est invisible mais aucune erreur JS n'est générée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-slide-up" id="slideUpText">
<!-- splitText(el, "Votre texte", 0.06) génère ces spans -->
<span style="animation-delay: 0s">V</span>
<span style="animation-delay: .06s">o</span>
<!-- … une <span> par lettre, espaces en texte brut … -->
</span>
<button class="replay-btn" onclick="replaySlideUp()">Replay</button>
</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 |
|---|---|---|
| Délai de cascade | 0,06 s par lettre | 3ᵉ argument de splitText(el, text, delay) — augmenter (0,10 s) pour espacer davantage, réduire (0,03 s) pour un texte de 15+ lettres. |
| Durée d'animation | 0,4 s | Valeur 0.4s dans la règle CSS .text-slide-up span — 0,6 s pour plus de fluidité, 0,2 s pour un flash rapide. |
| Distance de départ | translateY(100%) | Propriété transform: translateY(100%) dans .text-slide-up span — réduire à 60 % pour un mouvement subtil ; ajouter overflow: hidden au parent pour clipper le voyage. |
| Easing | ease | Valeur ease dans animation: .4s ease — remplacer par cubic-bezier(0.22, 1, 0.36, 1) pour un léger overshoot, ou linear pour une montée constante. |
| Taille de police | 2,5 rem | font-size dans .demo-text — 3–6 rem pour un hero plein écran, 1,5–2 rem pour un texte éditorial. |
| Graisse | 800 | font-weight dans .demo-text — 900 pour l'impact maximal, 400 pour un texte éditorial fin. |
| Espacement des lettres | −0,02 em | letter-spacing dans .demo-text — passer à 0,05–0,15 em pour un look affiché aéré (display type). |
| Couleur accent bouton | #818cf8 | Variable CSS --primary-light dans :root — remplacer par la couleur de votre charte pour le bouton Replay. |
FAQ
splitText est un utilitaire partagé entre les effets texte de l'instance Effect.Labs. En standalone, ajoutez-la avant l'IIFE : function splitText(el,text,delay){el.innerHTML='';text.split('').forEach(function(ch,i){if(ch===' '){el.appendChild(document.createTextNode(' '));}else{var s=document.createElement('span');s.textContent=ch;s.style.animationDelay=(i*delay)+'s';el.appendChild(s);}});}.text-slide-up span s'applique à n'importe quel élément portant cette classe. Pour plusieurs instances, écrivez une factory : function makeSlideUp(id,text,delay){var el=document.getElementById(id);splitText(el,text,delay||0.06);return function(){el.innerHTML='';setTimeout(function(){splitText(el,text,delay||0.06);},50);}} Appelez var replay=makeSlideUp('monId','Mon titre',0.06) par élément..text-slide-up vide dans le HTML (aucun span pré-fabriqué). Branchez un IntersectionObserver sur l'élément : à l'entrée dans le viewport, appelez splitText(el, 'Votre titre', 0.06) — les spans s'injectent et l'animation CSS démarre immédiatement, sans modifier le CSS ni le keyframe.
