Clip Path Reveal
Révèle un texte progressivement de gauche à droite par une animation CSS clip-path: inset() — zéro JavaScript, direction et durée configurables.
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 dévoilement repose sur la propriété CSS clip-path: inset(). L'élément .text-clip-reveal démarre avec clip-path: inset(0 100% 0 0) — le rectangle de découpe occupe toute la largeur par la droite, rendant le texte totalement invisible. L'animation clipRevealAnim fait glisser ce rectangle vers inset(0) (zéro découpe de chaque côté), dévoilant le texte de gauche à droite.
La propriété animation sur .text-clip-reveal est déclarée en shorthand : 1s ease 0s 1 normal forwards running. Le mot-clé forwards est essentiel — il maintient l'état final (inset(0), texte entièrement visible) après la fin de l'animation, évitant un flash de retour à l'état initial masqué.
Le mécanisme est entièrement CSS : aucun JavaScript n'est nécessaire pour l'animation. Pour rejouer l'effet par programmation, il faut forcer un reflow en retirant la classe, en lisant offsetWidth, puis en la rajoutant — cette opération reset le contexte d'animation du navigateur.
La direction du dévoilement est contrôlée par la valeur initiale de clip-path : déplacer le 100% parmi les quatre paramètres inset(top right bottom left) permet de dévoiler depuis n'importe quel bord — droite, gauche, haut ou bas.
Accessibilité
- prefers-reduced-motion : absent du code — aucun media query n'est inclus dans le CSS de l'effet. Pour un public large, ajoutez :
@media (prefers-reduced-motion: reduce) { .text-clip-reveal { animation: none; clip-path: inset(0); } } - La propriété
clip-pathest purement visuelle : elle ne retire pas le texte du flux DOM ni de l'arbre d'accessibilité — un lecteur d'écran lit le contenu même lorsqu'il est visuellement masqué par le rectangle de découpe. - Contraste : le texte blanc (
#fff) sur fond sombre (#0a0a0f) dépasse largement WCAG AA (ratio > 18:1 par défaut). À vérifier si vous personnalisez les couleurs. - Pas d'interaction clavier ni de comportement de focus dans l'effet — il est passif (animation CSS au chargement). Aucun
tabIndexniaria-*n'est requis pour l'effet seul. - Pour un déclenchement au scroll (IntersectionObserver + ajout de classe), le texte est déjà présent dans l'arbre d'accessibilité avant que la classe ne soit ajoutée : aucune information n'est cachée aux lecteurs d'écran.
Compatibilité navigateur
Nécessite clip-path CSS — supporté dans tous les navigateurs modernes depuis 2017. Zéro dépendance externe, zéro JavaScript.
Si <code>clip-path</code> n'est pas supporté (IE 11), le texte s'affiche directement sans animation — aucune erreur JS, la page reste lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<!-- .text-clip-reveal s'applique sur n'importe quel élément texte -->
<span class="demo-text text-clip-reveal">VOTRE TEXTE</span>
</div>
<!-- Ou directement sur un titre -->
<h1 class="demo-text text-clip-reveal">Titre principal</h1>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 |
|---|---|---|
| Direction — inset initial sur .text-clip-reveal | inset(0 100% 0 0) | Côté de départ du dévoilement. inset(0 0 0 100%) = droite→gauche ; inset(0 0 100% 0) = haut→bas ; inset(100% 0 0 0) = bas→haut. |
| Durée — 1ʳᵉ valeur de animation | 1s | Durée de l'animation. 0.4s pour un effet snappy, 2s pour un rendu cinématique. |
| Easing — 2ᵉ valeur de animation | ease | Courbe de vitesse. linear pour un défilement mécanique, cubic-bezier(0.25, 1, 0.5, 1) pour élan puis décélération. |
| Délai — 3ᵉ valeur de animation | 0s | Délai avant démarrage. Enchaîner 0s, 0.15s, 0.3s… sur plusieurs éléments crée un effet cascade. |
| font-size sur .demo-text | 2.5rem | Taille du texte. clamp(1.5rem, 5vw, 4rem) pour un rendu responsive. |
| font-weight sur .demo-text | 800 | Graisse. 400 pour un style éditorial léger, 900 pour un impact maximal. |
| Replay JS | — | Pour rejouer sans rechargement : el.classList.remove('text-clip-reveal'); void el.offsetWidth; el.classList.add('text-clip-reveal'). La lecture d'offsetWidth force le reflow qui reset le contexte d'animation. |
FAQ
.text-clip-reveal sur n'importe quel élément texte et l'effet se déclenche au chargement. JavaScript n'est utile que pour rejouer l'animation ou la déclencher au scroll via IntersectionObserver.clip-path initiale sur .text-clip-reveal. La syntaxe inset(top right bottom left) indique quel côté masque le texte au départ : inset(0 100% 0 0) = masqué par la droite (révèle gauche→droite) ; inset(100% 0 0 0) = masqué par le haut (révèle bas→haut) ; inset(0 0 0 100%) = masqué par la gauche (révèle droite→gauche)..text-clip-reveal dans le HTML initial et fixez clip-path: inset(0 100% 0 0) en CSS inline ou via une classe neutre. Un IntersectionObserver ajoute ensuite .text-clip-reveal lorsque l'élément entre dans le viewport — le navigateur déclenche alors l'animation au moment exact de la visibilité.
