Glitch Hover
Trois @keyframes CSS déclenchés au survol : glitchBase secoue l'élément, glitchRed et glitchCyan décalent les copies rouge et cyan via clip-path en bandes horizontales — aberration chromatique RVB sans JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0354-root centre un bloc .hover-box.hover-glitch sur fond #0a0a0f. L'élément porte un attribut data-glitch-label dont la valeur est reprise dans les content: attr(data-glitch-label) des pseudo-éléments ::before (rouge) et ::after (cyan). Ces pseudo-éléments sont superposés à 50 % de l'élément via transform: translate(-50%, -50%) et ont opacity: 0 au repos.
Au survol (ou au focus), quatre animations démarrent simultanément : fx0354-glitchBase secoue l'élément de ±2 px en XY ; fx0354-glitchRed déplace la copie rouge tout en la découpant en bandes horizontales variables avec clip-path: inset(X% 0 Y%) ; fx0354-glitchCyan fait de même de façon décalée pour la copie cyan ; fx0354-glitchText décale légèrement le span. L'effet crée une aberration chromatique RVB visible aux bandes de décalage rouge et cyan.
Les noms d'animation sont préfixés fx0354- pour éviter les collisions avec d'autres effets. Mesuré dans Chromium 151 : effet visible, deux copies sur une page — seule celle survolée s'anime. Risque photosensible : l'animation combine mouvement rapide et clignotement des couleurs ; sous prefers-reduced-motion: reduce, toutes les animations sont désactivées.
Accessibilité
- Mouvement réduit et photosensibilité : sous
prefers-reduced-motion: reduce, toutes les animations (glitchBase, glitchRed, glitchCyan, glitchText) sont désactivées et les copies rouge et cyan restent invisibles. Aucun clignotement ni mouvement rapide sous mouvement réduit. Les personnes photosensibles doivent activer ce mode système. - Clavier : l’élément est un
<button>nativement focusable. La règle:focus-visibledéclenche les mêmes animations Glitch qu’au survol ; un contour indigo signale le focus. - Contenu : le texte reste lisible grâce au
span(z-index 1) même pendant l'animation. Les copies rouge et cyan ne lisent pas le texte différemment des lecteurs d'écran. - Toucher : le premier toucher déclenche l'animation ; elle s'arrête au toucher suivant. Sur écran tactile, l'exposition à l'animation peut être plus longue — la note photosensibilité s'applique.
Compatibilité navigateur
CSS pur (@keyframes, clip-path: inset(), animation, :focus-visible, prefers-reduced-motion), aucun JavaScript. Mesuré dans Chromium 151 : effet complet, deux copies indépendantes. clip-path: inset() disponible depuis Chrome 55, Firefox 54, Safari 10.
Sans clip-path (navigateurs très anciens), les copies rouge et cyan s'affichent entières sans découpage en bandes — l'effet glitch est moins lisible mais pas cassé. Sans animation, l'élément reste statique.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0354-root">
<button class="hover-box hover-glitch" type="button" data-glitch-label="…">
<span>…</span>
</button>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Texte des copies RVB (HTML — data-glitch-label) |
Le texte visible du span |
La valeur de data-glitch-label est reprise par les ::before et ::after via content: attr(data-glitch-label). Changer la valeur change le texte des copies chromatiques. |
Couleurs de l'aberration (CSS — color de ::before et ::after) |
Rouge (red) et cyan (#0ff) |
Remplacez par #f97316 et #22d3ee pour une aberration orange-cyan, ou #a855f7 et #22c55e pour une version violet-vert. |
Amplitude du décalage (CSS — les -52% et -48% dans les keyframes) |
2 % d'écart | Augmenter à 4–5 % rend l'effet plus prononcé ; réduire à 1 % le rend subtil. Le signe + ou − des valeurs détermine la direction du décalage. |
Vitesse de l'animation (CSS — animation: .3s ease 0s infinite) |
300 ms par cycle | .5s rend le glitch plus lent et moins agressif ; .1s le rend très nerveux. steps(1) comme fonction d'accélération crée un glitch plus saccadé. |
Fond de l'élément (CSS — background de .hover-glitch) |
var(--bg-card) (sombre) |
Un fond avec texture ou dégradé rend le glitch plus difficile à lire mais plus organique. Sur fond clair, remplacez les couleurs des copies RVB par des teintes plus sombres. |
FAQ
prefers-reduced-motion: reduce, toutes les animations sont désactivées dans le code fourni. Il est recommandé d'avertir les utilisateurs dans l'interface si cet effet est central à la page.data-glitch-label est l'attribut HTML copié dans les pseudo-éléments CSS. Si le texte du span change dynamiquement, mettez aussi à jour l'attribut : el.setAttribute('data-glitch-label', nouveauTexte).::before et ::after comme calques superposés avec background-image, puis appliquez clip-path et mix-blend-mode: color pour l'aberration chromatique.
