Tamburo di voci

/* Tamburo di voci
   Una lista che scorre dentro una fascia fissa, come le voci sul tamburo di una macchina.
   La voce più vicina al centro è piena, le altre sfumano con la distanza; una maschera CSS
   le fa sparire sopra e sotto. Il rombo accanto gira di un quarto di giro a ogni voce. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const CENTRO = 0.5;          /* dove sta la fascia chiara, in frazione dell'altezza */
const SPENTO = 0.14;         /* opacità minima delle voci lontane */
const CADUTA = 0.85;         /* quanto in fretta si spengono allontanandosi (1 = voce dopo già spenta) */
const GIRO = 90;             /* gradi del rombo per ogni voce */

const tamburo = document.querySelector('.tamburo');
const lista = document.querySelector('.voci');
const voci = [...document.querySelectorAll('.voce')];
const rombo = document.querySelector('.rombo');
const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const n = voci.length;
let centri = [];

const misura = () => { centri = voci.map((v) => v.offsetTop + v.offsetHeight / 2); };

function disegna(k) {
  /* k va da 0 (prima voce al centro) a n - 1 (ultima voce al centro) */
  const i = Math.min(n - 2, Math.floor(k));
  const f = k - i;

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

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