Pixel Dissolve
Un cache coloré se décompose en blocs carrés qui disparaissent un à un au survol, au focus ou au toucher, et révèle ce qu'il recouvre ; il se reforme ensuite.
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
La zone .dsv-zone empile ses enfants au même endroit (grille CSS à une seule case). Le dernier, .dsv-cover, passe au-dessus : c'est le cache en dégradé violet, rose et orange avec son texte. Tout ce que vous placez avant lui dans la zone (une réponse, une photo, un prix) attend dessous.
Le script découpe le cache en blocs d'environ 16 px (data-dsv-block) et tire au hasard leur ordre de disparition. Quand l'effet s'allume, un masque SVG généré à la volée (mask-image) retire les blocs un par un pendant 800 ms (data-dsv-out) ; quand il s'éteint, ils reviennent dans l'ordre inverse en 500 ms (data-dsv-in). Une fois tous les blocs partis, le cache passe en visibility: hidden.
Le temps de chaque image d'animation est plafonné à 50 ms et rien ne tourne au repos. Un ResizeObserver recalcule la grille de blocs si le cache change de taille. Le cache peut contenir du texte, une image ou un dégradé : le masque s'applique à tout son contenu.
Accessibilité
- Clavier : la zone porte
tabindex="0"et un contour (--dsv-ring) ; le focus au clavier dissout le cache comme le survol, et le cache revient quand le focus s'en va. - Toucher : un toucher dissout le cache, un second le reforme (mesuré dans Chromium, Firefox et WebKit avec écran tactile simulé).
- Lecteurs d'écran : le contenu caché est dans la page dès le départ et il est lu, comme le texte du cache tant qu'il est visible. Ne vous en servez pas pour cacher une réponse à un lecteur d'écran ; écrivez un texte de cache qui annonce ce qu'il recouvre.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, le cache disparaît et réapparaît d'un coup, sans la dissolution bloc par bloc ; le contenu reste accessible de la même façon. - Pas de clignotement : chaque bloc disparaît une seule fois par passage, sans alternance rapide de luminosité.
Compatibilité navigateur
CSS et 3,6 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, survol, Tab, toucher, 390 px et mouvement réduit. Le masque est posé à la fois en mask-image et en -webkit-mask-image : la version préfixée existe depuis longtemps dans Chrome et Safari (versions sans préfixe d'après @mdn/browser-compat-data : Chrome 120, Firefox 53, Safari 15.4). Le plancher vient des Pointer Events (Safari 13) et de ResizeObserver (Chrome 64, Firefox 69, Safari 13.1).
Sans masque CSS, les blocs ne se voient pas : le cache reste entier pendant l'animation puis disparaît d'un coup à la fin. Sans :focus-visible (avant Safari 15.4), un clic de souris dans la zone dissout aussi le cache. Sans JavaScript, le cache reste en place.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0274-root" data-dsv-block="16" data-dsv-out="800" data-dsv-in="500">
<div class="dsv-zone" tabindex="0">
<div class="dsv-cover">HOVER ME</div>
</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 |
|---|---|---|
data-dsv-block (sur la racine) |
16 |
Taille visée des blocs en pixels (4 au minimum) ; la grille s'ajuste pour tomber juste sur la largeur et la hauteur du cache. |
data-dsv-out et data-dsv-in |
800 et 500 |
Durées en millisecondes de la dissolution et du retour des blocs ; 0 pour un passage instantané. |
| Contenu révélé | Aucun (la zone ne contient que le cache) | Placez votre contenu dans .dsv-zone, avant .dsv-cover : il occupe la même case et apparaît sous les blocs qui partent. |
--dsv-w et --dsv-h |
200px et 120px |
Taille de la zone ; --dsv-w: 100% pour suivre le conteneur, --dsv-h: auto pour prendre la hauteur du contenu. |
--dsv-cover et --dsv-cover-color |
dégradé #6366f1 → #ec4899 → #f59e0b, et #ec4899 |
Fond du cache (image ou dégradé) et couleur unie dessous. Pour un cache uni, donnez la même couleur aux deux. |
--dsv-text et --dsv-font |
#fff et 16px |
Couleur et taille du texte du cache. |
--dsv-radius et --dsv-ring |
12px et #ec4899 |
Arrondi de la zone et du cache, couleur du contour au focus clavier. |
--dsv-bg et --dsv-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour l'insérer dans votre page. |
FAQ
.dsv-cover part avec les blocs, qu'il s'agisse de texte, d'une <img> ou d'un fond --dsv-cover: url(…). Le masque découpe ce qui est affiché, quelle que soit sa nature.
