Glitch Blocks
Rectangles de couleur qui surgissent au hasard dans un bloc et s'y éteignent par saccades, comme un signal numérique corrompu ; texte net par-dessus.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bloc .gbk-box (250×150 px, fond #1a1a2e) contient votre texte .gbk-text (« ERROR » par défaut). Toutes les 200 ms, le script y ajoute un rectangle .gbk-block de 10 à 90 px de large et 5 à 35 px de haut, posé à un endroit tiré au hasard, d'une teinte comprise entre 220° et 280° (du bleu au violet), saturée à 70 % et claire à 60 %.
Chaque rectangle reçoit un retard d'animation aléatoire entre 0 et 2 s. Pendant ce retard il est affiché plein ; quand l'animation gbk-flash démarre, il disparaît, puis se rallume brièvement (environ 0,16 s) à la fin de son cycle de 2 s s'il existe encore. Il est retiré du DOM au bout de 3 s. Résultat : trois à cinq rectangles visibles à tout moment, qui apparaissent et s'éteignent sans rythme régulier.
Le texte passe au-dessus des rectangles (z-index: 1). Chaque bloc a sa propre minuterie, lue sur ses attributs data-hue, data-spread et data-rate : deux copies sur une page tournent indépendamment, chacune avec ses couleurs. La minuterie s'arrête quand le bloc sort de l'écran ou que l'onglet est caché, et reprend au retour (mesuré : 0 rectangle ajouté en 2 s hors écran).
Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : aucune erreur, rien sur window, la 2e copie se remplit comme la 1re. Un bloc masqué en display: none ne fabrique rien tant qu'il n'est pas affiché.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, aucun rectangle n'apparaît ni ne clignote. Le script pose une fois pour toutes un jeu de rectangles fixes (6 dans le bloc par défaut, plus dans un grand bloc) à 70 % d'opacité : l'aspect « signal corrompu » reste, sans aucun mouvement. Le changement de préférence en cours de visite est suivi. - Photosensibilité : les rectangles s'allument d'un coup. Mesure image par image : chaque rectangle s'allume et s'éteint une fois toutes les 2 s : au plus 1 flash par seconde sur une même zone, sous le seuil de 3 flashs par seconde (WCAG 2.3.1), y compris avec
data-rate="40"sur un bloc de 800 × 400 px. Avec un fond de bloc clair, refaites la vérification. - Lecteurs d'écran : les rectangles sont des
divvides, rien n'est lu. Seul le texte de.gbk-textl'est. Pour un message d'erreur, mettezrole="alert"sur le conteneur que vous affichez. - Lisibilité : les rectangles sont clairs ; un texte blanc posé sur l'un d'eux perd du contraste pendant un instant. Une ombre portée sur
.gbk-text(text-shadow: 0 1px 3px #000) règle la question. - Clavier et toucher : rien à activer, l'effet est automatique. Les rectangles ont
pointer-events: noneet ne gênent pas les liens placés dans le texte.
Compatibilité navigateur
CSS (variables, @keyframes) et 2 Ko de JavaScript. Versions minimales d'après les données MDN : NodeList.forEach (Chrome 51, Firefox 50, Safari 10). La pause hors écran utilise IntersectionObserver (Safari 12.1+) ; plus ancien, l'effet tourne sans pause. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5.
Sans JavaScript, le bloc et son texte s'affichent, sans aucun rectangle. Sans variables CSS, le bloc perd sa taille.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0258-root">
<div class="gbk-box" data-hue="220" data-spread="60" data-rate="200">
<span class="gbk-text">…</span>
</div>
</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 |
|---|---|---|
--gbk-w / --gbk-h |
250px / 150px |
Taille du bloc. 100% pour remplir le conteneur (donnez alors une hauteur à la racine avec --gbk-root-h). |
--gbk-bg |
#1a1a2e |
Fond du bloc : couleur, dégradé ou image. |
--gbk-root-bg / --gbk-root-h |
#0a0a0f / 300px |
Fond et hauteur minimale de la racine. transparent et 0 pour que la racine épouse le bloc. |
data-hue (sur .gbk-box) |
220 |
Teinte de départ des rectangles, en degrés (0 rouge, 120 vert, 200 cyan, 220 bleu). |
data-spread |
60 |
Écart de teinte tiré au hasard au-dessus de data-hue. 0 pour une couleur unique. |
data-rate |
200 (ms, minimum 40) |
Intervalle entre deux nouveaux rectangles. Plus bas, plus de rectangles à l'écran : 60–80 pour une grande surface. |
Taille des rectangles (JS — 10 + Math.random() * 80, 5 + Math.random() * 30) |
10–90 × 5–35 px | Agrandissez ces bornes pour un bloc plein écran, réduisez-les pour une vignette. |
Texte (HTML — .gbk-text) |
« ERROR » | Remplacez-le par votre message ; il peut contenir plusieurs lignes et des liens. |
FAQ
hidden), et affichez-le quand l'erreur survient. Tant qu'il est masqué, il ne fabrique aucun rectangle ; il démarre dès qu'il devient visible. Le script ne repère que les blocs présents au chargement : un bloc inséré plus tard n'est pas animé..gbk-text a z-index: 1 et les rectangles n'en ont pas. Si votre texte est dans un autre élément, donnez-lui position: relative; z-index: 1.data-rate="60", une cinquantaine. Hors écran ou onglet caché, aucun.
