Slide Reveal
Révèle un texte par le bas grâce à un conteneur overflow:hidden et une transition translateY — CSS pur, zéro JS, déclinable en cascade sur plusieurs lignes.
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
Le mécanisme repose sur deux règles CSS complémentaires. Le .text-reveal-container applique overflow: hidden, transformant le conteneur en masque : tout ce qui déborde vers le bas est invisible. La span .text-reveal démarre à transform: translateY(100%) — entièrement positionnée sous la ligne inférieure du conteneur, donc cachée à l'état initial.
L'animation @keyframes revealUp ne définit qu'une étape finale : to { transform: translateY(0) }. Le navigateur interpole automatiquement depuis translateY(100%). Le raccourci animation: 1s ease 0s 1 normal forwards running revealUp fixe la durée (1 s), la courbe (ease), le délai (0 s), le nombre d'itérations (1) et le fill-mode (forwards) qui fige le texte en position finale après la montée.
La règle .demo-text span { display: inline-block } prépare les déclinaisons mot par mot ou caractère par caractère. En fragmentant le texte en <span> individuels — manuellement ou via JS —, chaque fragment hérite du même mécanisme de masque et peut recevoir un animation-delay croissant pour une cascade synchronisée.
L'effet est 100 % CSS, sans JavaScript embarqué. Le rejouer après le chargement demande deux lignes : retirer la classe .text-reveal, forcer un reflow avec el.offsetWidth, puis la remettre — le navigateur relance l'animation depuis translateY(100%).
Accessibilité
- prefers-reduced-motion : absent du code — aucune règle
@media (prefers-reduced-motion: reduce)n'est incluse. Recommandé : ajouter@media (prefers-reduced-motion: reduce) { .text-reveal { animation: none; transform: none; } }pour afficher le texte immédiatement sans mouvement. - Le texte reste dans le flux DOM et est nativement lisible par les lecteurs d'écran indépendamment de sa position visuelle pendant l'animation.
- L'animation ne déplace aucun élément interactif et ne crée pas de piège au focus — la navigation clavier n'est pas affectée.
- L'effet ne définit pas de couleur de texte propre : le ratio de contraste dépend du contexte d'intégration et doit être vérifié selon WCAG AA (≥ 4,5:1).
- Aucun attribut
aria-labelniroledans le balisage fourni — si le texte est décoratif, ajouteraria-hidden="true"; s'il est informatif, le laisser dans le flux.
Compatibilité navigateur
Nécessite transform, @keyframes et animation — supportés dans tous les navigateurs modernes depuis 2013. Zéro dépendance externe.
Sans support des animations CSS (navigateurs antérieurs à 2013), le texte reste bloqué à <code>translateY(100%)</code> et n'est pas visible. Ajoutez <code>@supports not (animation: none) { .text-reveal { transform: none; } }</code> pour sécuriser les environnements très anciens.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="text-reveal-container">
<span class="text-reveal demo-text">Votre titre ici</span>
</div>
<!-- Cascade : répéter le bloc avec des animation-delay croissants via CSS -->
<div class="text-reveal-container">
<span class="text-reveal demo-text">Première ligne</span>
</div>
<div class="text-reveal-container">
<span class="text-reveal demo-text">Deuxième ligne</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 |
|---|---|---|
| animation-duration dans .text-reveal | 1s | Durée de la montée. 0.5 s = vif et moderne, 1.2 s = cinématique et lent. |
| animation-timing-function dans .text-reveal | ease | Courbe de vitesse. cubic-bezier(0.16,1,0.3,1) = ressort expressif, ease-out = décélération douce, linear = vitesse constante. |
| animation-delay dans .text-reveal | 0s | Délai avant démarrage. Des valeurs croissantes (0 s, 0.12 s, 0.24 s…) sur des spans frères créent une cascade sans JS supplémentaire. |
| transform: translateY(…) dans .text-reveal | 100% | Amplitude de départ. 110–120 % ajoute une marge visible sous le conteneur et accentue l'effet de masque sur les grandes polices. |
| font-size dans .demo-text | 2.5rem | Taille du texte affiché. De 1 rem (labels) à 8 rem (super-titres) — aucune contrainte interne. |
| letter-spacing dans .demo-text | -0.02em | Espacement des caractères. Valeur négative = condensé (grands titres), 0 em à 0.05 em = espacé (labels et sous-titres). |
FAQ
<span> individuels (manuellement ou via text.split(' ').map(…) en JS), enveloppez chacun dans un .text-reveal-container, et appliquez des animation-delay croissants (0 s, 0.12 s, 0.24 s…) sur chaque .text-reveal. Le mécanisme de masque fonctionne identiquement pour chaque fragment..text-reveal (ou poser animation: none en style inline), (2) forcer un reflow synchrone avec element.offsetWidth, (3) remettre la classe. Le navigateur repart de translateY(100%) et relance la transition.useState et un useEffect de reset ; dans Vue, utilisez :class ; dans Svelte, class:. Le mécanisme CSS reste identique quel que soit le framework.
