Glitch Text
Texte « LOADING » en 32 px gras : copie rouge de la moitié haute animée à ±2 px / 0,3 s, copie cyan de la moitié basse fixe — CSS pur, zéro JavaScript.
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. Chargement comprend 29 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le .loader-glitch est un div contenant le texte LOADING en 32 px, graisse 800, couleur #6366f1 (indigo), position: relative. Deux pseudo-éléments, ::before et ::after, partagent position: absolute; left: 0; top: 0 et portent tous les deux content: “LOADING” — valeur codée en dur dans le CSS, pas via attr(data-text). Le ::before est rouge (color: red) et découpé à la moitié haute par clip-path: inset(0 0 50%) ; le ::after est cyan (color: #0ff) et découpé à la moitié basse par clip-path: inset(50% 0 0). La superposition des trois couches remplit la bounding box du texte, mesurée à 148 × 37 px avec la police sans-serif par défaut.
L'animation glitchLoader ne s'applique qu'au ::before (la moitié haute rouge) : 0,3 s linear infinite alternate-reverse. Les keyframes déplacent cette couche en translate sur cinq positions : (0, 0) aux extrémités, (−2 px, +2 px) à 20 %, (−2 px, −2 px) à 40 %, (+2 px, +2 px) à 60 %, (+2 px, −2 px) à 80 %. La direction alternate-reverse joue la séquence à rebours sur les cycles impairs, évitant un saut visible à la répétition. Mesuré : animationName: “glitchLoader” sur ::before, animationName: “none” sur ::after — la moitié basse cyan est statique, toujours alignée sur le texte principal.
Deux points structurels. Premier : le mot affiché est répété à trois endroits — l'innerHTML du div, ::before { content: “LOADING” } et ::after { content: “LOADING” } — sans liaison attr(data-text) ; changer l'étiquette exige trois éditions. Second : aucune règle @media (prefers-reduced-motion) n'est présente ; mesuré sous émulation reducedMotion: reduce, le animationPlayState du ::before reste “running”. Le code ne contient pas de JavaScript — le champ js est une chaîne vide.
Accessibilité
- prefers-reduced-motion absent du code : mesuré sous émulation, l'animation continue. Ajoutez
@media (prefers-reduced-motion: reduce) { .loader-glitch::before { animation: none; } }pour figer l'effet. - Cet élément est destiné à signaler une opération en cours : le code ne déclare ni
role="status", niaria-live, niaria-busy. Ajoutezrole="status" aria-live="polite" aria-label="Chargement en cours"sur le.loader-glitch. - Les pseudo-éléments avec
content: "LOADING"sont exposés par certains lecteurs d'écran (NVDA, VoiceOver iOS). Pour éviter la triple lecture, ajoutezaria-hidden="true"aux pseudo-éléments via.loader-glitch::before, .loader-glitch::after { speak: none; }— ou remplacez leurscontentpar des chaînes vides et ne gardez le texte lisible que dans lediv. - Les trois couleurs (indigo, rouge, cyan) sont décoratives et ne portent pas d'information de statut. Sur fond sombre (#0a0a0f), les contrastes dépassent 4,5 :1 ; sur fond clair, vérifiez chaque teinte indépendamment.
Compatibilité navigateur
Requiert clip-path: inset(), @keyframes avec transform: translate() et les pseudo-éléments CSS. Zéro dépendance JavaScript.
Sans clip-path (IE 11), les pseudo-éléments s'affichent sans découpe : le rouge et le cyan recouvrent l'intégralité du texte, le jitter reste mais la séparation haute/basse disparaît.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="loader-glitch">LOADING</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 |
|---|---|---|
Mot affiché (HTML + CSS ::before { content: "…" } et ::after { content: "…" }) |
LOADING | Trois occurrences à modifier ensemble : l'innerHTML du div et les deux règles content. Pour n'éditer qu'un seul endroit, remplacez les content par attr(data-text) et posez l'attribut sur l'élément. |
Couleur principale (CSS color: #6366f1) |
#6366f1 (indigo) | Teinte du texte de base, visible aux extrémités latérales des lettres là où les pseudo-éléments ne couvrent pas. |
Couleur canal haut (CSS ::before { color: red }) |
red — rgb(255, 0, 0) | Couleur de la moitié haute, la seule animée. #ff00aa pour un glitch magenta/cyan, lime pour un registre terminal. |
Couleur canal bas (CSS ::after { color: #0ff }) |
#0ff (cyan) | Couleur de la moitié basse, fixe. Pour l'animer aussi, ajoutez animation: glitchLoader 0.3s linear infinite alternate sur ::after. |
Durée d'animation (CSS animation: glitchLoader 0.3s) |
0,3 s | 0.1s = saccade rapide (urgence) ; 0.6s = glitch lent (atmosphère) ; au-delà de 1 s, le jitter ressemble davantage à une vibration qu'à un glitch. |
Amplitude du décalage (CSS translate(-2px, 2px) dans les keyframes) |
±2 px | Modifier les huit valeurs de translate() réparties sur les cinq stops des keyframes. ±1 px = glitch subtil ; ±5 px = distorsion marquée. |
Point de découpe (CSS clip-path: inset(0 0 50%) et inset(50% 0 0)) |
50 % — coupe à mi-hauteur | inset(0 0 30%) / inset(70% 0 0) donne plus de rouge animé et moins de cyan fixe. Les deux valeurs doivent sommer à 100 %. |
FAQ
::after n'a pas de propriété animation dans le CSS vendu — mesuré : animationName : “none”. Seul le ::before (rouge, moitié haute) reçoit glitchLoader. Pour animer le bas aussi, ajoutez .loader-glitch::after { animation: glitchLoader 0.3s linear infinite alternate; } — notez la direction alternate (et non alternate-reverse) pour que les deux couches ne bougent pas toujours dans le même sens.div.loader-glitch, puis .loader-glitch::before { content: “…” } et .loader-glitch::after { content: “…” } dans le CSS. Pour n'avoir qu'un seul point de changement, remplacez les deux content par content: attr(data-text) et posez data-text="LOADING" sur l'élément : une seule édition suffit ensuite.content: attr(data-text) (le texte est configurable via l'attribut, sans toucher au CSS), duplique le texte en couches complètes avec des bandes de clip différentes sur chaque couche, et est conçu comme un effet décoratif permanent sur n'importe quel texte. fx-0438 est un indicateur de chargement dont le texte est codé en dur, découpe les couches en moitiés haute/basse et n'anime qu'une seule couche — ce qui produit un registre différent, plus asymétrique.
