Pixelate Effect

Le code

Un aperçu du code source :

<div class="pixelate-box" id="pixelateBox">
    <div class="pixel-grid" id="pixelGrid">
      <div class="pixel-cell">
      </div>
      <div class="pixel-cell">
      </div>
      <div class="pixel-cell">
      </div>
      <div class="pixel-cell">
      </div>

Cas d'usage concrets

Quelques contextes où Pixelate Effect fait mouche :

• Un effet de survol sur une vignette
• Une intro de site créatif
• Un titre d'accroche marquant

Comment ça marche

CSS + un petit script JavaScript vanilla (aucune dépendance). Il s'appuie sur filtres CSS (filter).

À personnaliser

Tu peux régler :

• les couleurs, la taille et le timing directement dans le CSS

Intégrer en 3 étapes

1. Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
2. Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
3. Ajoute le petit script JavaScript avant </body> — c'est prêt.

Compatibilité navigateur

Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre.

Plus d'effets Distorsion

FAQ