Il globo di copertine

/* Il globo di copertine
   Le copertine stanno su una sfera, distribuite con la spirale di Fibonacci: ognuna guarda verso
   l'esterno. È tutto CSS 3D: la sfera ruota con un transform e ogni copertina ha il suo
   rotateY / rotateX / translateZ. Scorrendo, le due parole del titolo si allontanano verso i bordi e
   in mezzo il globo cresce e gira; alla fine le parole si richiudono e compare il collegamento. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const QUANTE = matchMedia('(max-width: 700px)').matches ? 28 : 44;   /* quante copertine */
const GIRI = 1.4;            /* giri completi del globo durante la corsa */
const INCLINAZIONE = 14;     /* gradi: il globo si guarda un po' dall'alto */
const RIPOSO = 0.14;         /* radianti al secondo di rotazione continua */
const RAGGIO = 0.3;          /* raggio della sfera in frazione del lato corto dello schermo */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const titolo = document.querySelector('.titolo');
const [a, b] = document.querySelectorAll('.parola');
const scala = document.querySelector('.globo__scala');
const sfera = document.querySelector('.sfera');
const tutti = document.querySelector('.tutti');

/* i punti sulla sfera: y va da +1 (in alto) a -1, l'angolo d'oro li gira senza allinearli */
const ORO = Math.PI * (3 - Math.sqrt(5));
const punti = Array.from({ length: QUANTE }, (_, i) => {
  const y = 1 - (i / (QUANTE - 1)) * 2;
  const r = Math.sqrt(1 - y * y);

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

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