Persiane sulle immagini

/* Persiane sulle immagini
   Sopra ogni immagine ci sono delle stecche del colore della pagina. Quando l'immagine entra
   nello schermo le stecche si ritirano verso l'alto in ordine sparso, come una persiana che si
   apre, e intanto l'immagine si allontana (da 1.3 a 1). Le stecche non sono tutte uguali:
   l'ultima è larga il doppio, e quante sono dipende dalla larghezza della foto. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const STECCA = 170;          /* larghezza indicativa di una stecca, in pixel */
const MIN = 2, MAX = 5;      /* quante stecche al minimo e al massimo */
const ZOOM = 1.3;            /* da quanto vicino parte l'immagine */
const DURATA = 0.8;

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;

document.querySelectorAll('.lavoro').forEach((lavoro, n) => {
  const quadro = lavoro.querySelector('.quadro');
  const immagine = lavoro.querySelector('.immagine');
  const didascalia = lavoro.querySelector('.didascalia');
  if (RIDOTTO) return;

  const persiane = document.createElement('div');
  persiane.className = 'persiane';
  persiane.setAttribute('aria-hidden', 'true');
  const quante = gsap.utils.clamp(MIN, MAX, Math.round(quadro.offsetWidth / STECCA));
  for (let i = 0; i < quante; i++) {

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.