L’ora che copre la foto

/* L'ora che copre la foto
   Si scorre in giù e la striscia va di lato: uno schermo fermo (position: sticky) e dentro un binario
   che scivola, un pixel di lato per ogni pixel di scorrimento. Tutti gli altri effetti si agganciano al
   binario con containerAnimation. Quando arriva un pannello con l'ora, la lastra prima resta ferma
   (viene spinta avanti quanto il pannello avanza) e si rimpicciolisce mentre il pannello la copre;
   le cifre salgono una dopo l'altra. Le foto sono più larghe della cornice e scorrono dentro di lei. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const RIMPICCIOLISCE = 0.86;   /* a quanto si riduce la lastra coperta */
const SPARISCE = 0.25;         /* in quale frazione della corsa del pannello la lastra coperta è già sparita */
const PARALLASSE = true;       /* le foto scorrono dentro la cornice */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const striscia = document.querySelector('[data-striscia]');
const binario = document.querySelector('[data-binario]');

/* grana: un quadrato di rumore disegnato una volta sola */
(function grana() {
  const c = document.createElement('canvas');
  c.width = c.height = 160;
  const x = c.getContext('2d');
  const img = x.createImageData(160, 160);
  for (let i = 0; i < img.data.length; i += 4) {
    const v = (Math.random() * 255) | 0;
    img.data[i] = img.data[i + 1] = img.data[i + 2] = v;

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

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