WebGL Displacement Slideshow
Diaporama sur canvas WebGL : à chaque changement, un bruit déforme l'image qui part et celle qui arrive pendant 0,9 s. Vos propres images, pause au survol.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Les visuels sont les diapositives .wds-slide écrites dans le HTML : soit une <img> (vos photos), soit deux couleurs dans data-wds-colors="#6d8bff,#5cffd8" (un dégradé diagonal). Au chargement, le script copie chaque image dans une texture WebGL, recadrée comme object-fit: cover pour remplir le cadre 16/9, et dessine la première sur le canvas .wds-canvas qui recouvre les diapositives.
À chaque changement, un shader lit un bruit de valeur (grille 4 × 4 lissée) et s'en sert pour décaler les deux images en sens inverse, l'ancienne de plus en plus, la nouvelle de moins en moins, pendant qu'elles se fondent (smoothstep entre 25 % et 75 % de l'animation). La transition dure 0,9 s, calculée au temps écoulé. Le canvas suit la taille de son cadre (ResizeObserver, densité d'écran plafonnée à 2) et se redessine aussitôt après un redimensionnement.
La lecture automatique avance toutes les 3,5 s (data-wds-interval) et s'arrête au survol de la souris, quand le focus clavier est dedans, hors écran, ou avec le bouton pause en haut à droite. Flèches ‹ ›, pastilles (une par diapositive, créées par le script) et glisser horizontal changent de diapositive. Sans WebGL, avec une image d'un autre domaine servie sans CORS, ou si le contexte WebGL est perdu, le canvas s'efface et les diapositives HTML passent de l'une à l'autre en fondu de 0,7 s.
Accessibilité
- Pause : bouton nommé « Mettre en pause la lecture automatique » / « Reprendre la lecture automatique », plus arrêt au survol, au focus clavier et hors écran.
data-wds-autoplay="false"désactive la lecture automatique (le bouton peut alors être masqué). - Texte lu : le canvas est
aria-hidden; ce sont les diapositives HTML qui sont lues, avec le texte alternatif de vos<img>. Régionaria-roledescription="carrousel", diapositivesrole="group"« 2 sur 5 », les cachées eninert. - Pastilles : vrais boutons nommés d'après l'
aria-labelde leur diapositive, la pastille en cours portearia-current="true". Flèches nommées « Précédent » / « Suivant ». - Mouvement réduit : sous
prefers-reduced-motion: reduce, pas de lecture automatique au départ et pas de déformation : l'image change d'un coup. Tout reste pilotable. - Toucher : Pointer Events et
touch-action: pan-y: un geste horizontal change d'image, la page défile verticalement.
Compatibilité navigateur
WebGL 1 (tous navigateurs depuis 2014), ResizeObserver, aspect-ratio et inert (Chrome 102, Firefox 112, Safari 15.5 d'après MDN). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux diaporamas dont le 2e piloté seul, 5 pastilles même avec le script collé deux fois, lecture qui avance sans survol et s'arrête au survol, image toujours dessinée après un redimensionnement, vraies images en <img>, mouvement réduit, 390 px, glisser au doigt (Chromium), 0 erreur. Repli fondu vérifié en forçant la perte du contexte WebGL.
Sans WebGL ou avec une image d'un autre domaine sans CORS : fondu CSS entre les diapositives HTML, mêmes boutons. Sans JavaScript : la première diapositive reste affichée (une image ; une diapositive en couleurs reste sur le fond sombre).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0801-root">
<div class="wds-scene" data-wds data-wds-interval="3500" role="region" aria-roledescription="carrousel" aria-label="…">
<canvas class="wds-canvas" aria-hidden="true"></canvas>
<div class="wds-slides" aria-live="off">
<div class="wds-slide wds-on" role="group" aria-roledescription="diapositive" aria-label="1 sur 5"><img src="…" alt="…"></div>
<div class="wds-slide" role="group" aria-roledescription="diapositive" aria-label="2 sur 5" data-wds-colors="#ff7eb6,#a777ff"></div>
…
</div>
<button class="wds-btn wds-prev" type="button" aria-label="…" data-wds-prev>‹</button>
<button class="wds-btn wds-next" type="button" aria-label="…" data-wds-next>›</button>
<button class="wds-toggle" type="button" data-wds-toggle data-wds-label-pause="…" data-wds-label-play="…"><svg class="wds-icon-pause">…</svg><svg class="wds-icon-play">…</svg></button>
<div class="wds-dots" data-wds-dots></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 |
|---|---|---|
Images (HTML — <img> dans .wds-slide) |
aucune | Vos photos, recadrées pour remplir le cadre. Même domaine que la page, ou serveur qui envoie les en-têtes CORS (et crossorigin="anonymous" sur l'image) ; sinon le diaporama passe en fondu CSS. |
Diapositive en couleurs (HTML — data-wds-colors) |
"#6d8bff,#5cffd8" … (5 dégradés) | Deux couleurs séparées par une virgule : dégradé diagonal, sans image. |
Intervalle (HTML — data-wds-interval sur [data-wds]) |
3500 (ms) | Temps entre deux changements automatiques ; 1500 ms au minimum. |
Lecture automatique (HTML — data-wds-autoplay="false") |
active (sauf mouvement réduit) | Désactive l'avance automatique : seules les flèches, les pastilles et le glisser changent l'image. |
Proportions (CSS — --wds-ratio) |
16 / 9 | Format du cadre ; auto si vous lui donnez une hauteur (fond plein écran). |
Libellés du bouton pause (HTML — data-wds-label-pause / data-wds-label-play) |
« Mettre en pause la lecture automatique » / « Reprendre la lecture automatique » | Noms lus selon l'état, à traduire. |
Pastille active (CSS — .wds-dot[aria-current="true"]) |
#5cffd8 | Couleur de la pastille de l'image affichée. |
FAQ
crossorigin="anonymous" à la balise et l'en-tête Access-Control-Allow-Origin côté serveur. Le fondu est le repli prévu dans ce cas.wds-on sur les .wds-slide (un MutationObserver suffit) pour mettre à jour un titre placé au-dessus.
