Pixelate Dissolve

Le code

Un aperçu du code source :

<div class="transition-preview" id="pixelateDissolve">
    <div class="transition-content old-content">Page A</div>
    <div class="transition-content new-content">Page B</div>
    <div class="pixelate-container">
      <div class="pixel-block" style="animation-delay: 0.170786s;">
      </div>
      <div class="pixel-block" style="animation-delay: 0.241903s;">
      </div>
      <div class="pixel-block" style="animation-delay: 0.0602894s;">
      </div>

Cas d'usage concrets

Quelques contextes où Pixelate Dissolve fait mouche :

• Le passage entre deux sections d'une landing
• Une transition de page dans un site portfolio
• L'ouverture d'une galerie photo

Comment ça marche

CSS + un petit script JavaScript vanilla (aucune dépendance). Il s'appuie sur animation @keyframes et transformations CSS (transform).

À personnaliser

Tu peux régler :

• la vitesse d'animation (actuellement 1.2s)

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 Transitions

FAQ