Korben Glitch Effect

Démo live

Les images ci-dessous glitchent automatiquement de façon aléatoire. Vous pouvez aussi forcer le déclenchement :

Glitch aléatoire sur .glitch-target

Durée aléatoire entre 320ms et 580ms

clip-path + mix-blend-mode + hue-rotate

Priorité aux images visibles dans le viewport

Installation

Deux fichiers à copier dans votre projet : glitch.css et glitch.js. C'est tout.

Ajoutez le CSS dans votre <head> et le JS avant </body>

html

<head>
  <link rel="stylesheet" href="glitch.css">
</head>
<body>

  <img class="glitch-target" src="mon-image.jpg" alt="...">

  <script src="glitch.js"></script>
</body>

Ajoutez la classe glitch-target sur les images que vous voulez glitcher
C'est tout. Le script fait le reste automatiquement.

Configuration

Tout se configure via des attributs data-* sur la balise <script> :

html

<script src="glitch.js"
  data-selector="img.glitch-target"
  data-interval-min="15000"
  data-interval-max="60000"
  data-duration-min="320"
  data-duration-max="580"
></script>

Attribut	Default	Description
data-selector	img.glitch-target	Sélecteur CSS des images à cibler
data-auto	false	Si `true`, cible toutes les `<img>` de la page
data-interval-min	15000	Délai minimum entre deux glitchs (ms)
data-interval-max	60000	Délai maximum entre deux glitchs (ms)
data-duration-min	320	Durée minimum d'un glitch (ms)
data-duration-max	580	Durée maximum d'un glitch (ms)

API JavaScript

Vous pouvez aussi contrôler l'effet manuellement :

// Glitch une image spécifique
KorbenGlitch.glitch(document.querySelector('#monImage'));

// Wrapper une image (sans déclencher le glitch)
KorbenGlitch.wrap(document.querySelector('#monImage'));

// Relancer la boucle automatique
KorbenGlitch.start();

Comment ça marche

Le script enveloppe chaque image ciblée dans un <span class="glitch-wrap">
Deux pseudo-éléments ::before et ::after dupliquent l'image via la variable CSS --glitch-src
Quand la classe .is-glitching est ajoutée, les pseudo-éléments s'animent :
- clip-path inset pour ne montrer que des bandes horizontales
- mix-blend-mode (screen / lighten) pour l'effet couleur
- hue-rotate + saturate pour le décalage chromatique
- translate3d pour le décalage spatial
Le script choisit aléatoirement des images visibles dans le viewport
Un PRNG déterministe (Mulberry32) assure la reproductibilité par session

Contenu du package

glitch.css    Les styles et animations
glitch.js     Le script (IIFE, zéro dépendance)
index.html    Cette page (démo + documentation)