Progetti in fila con l'anello

/* Progetti in fila con l'anello
   La scena resta ferma per tanti schermi quanti sono i progetti. Il progetto corrente è grande al centro;
   il precedente sale piccolo e sbiadito, il successivo aspetta sotto. A ogni cambio le carte scivolano al
   loro posto, nome e descrizione si riscrivono parola per parola e il fondo sfocato si dà il cambio.
   L'anello si riempie mentre ti avvicini al progetto dopo: dice quanto manca, senza numeri. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const STRETTO = matchMedia('(max-width: 800px)').matches;
const SALTO = STRETTO ? 0.28 : 0.36;   /* distanza delle carte vicine dal centro, in frazione dell'altezza */
const PICCOLE = 0.34;                  /* scala delle carte vicine */
const DURATA = 0.7;                    /* secondi per ogni cambio */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const corsa = document.querySelector('.corsa');
const carte = [...document.querySelectorAll('.carta')];
const nome = document.querySelector('.nome');
const descrizione = document.querySelector('.descrizione');
const strati = [...document.querySelectorAll('.fondo__strato')];
const pieno = document.querySelector('.anello__pieno');
const N = carte.length;
const d = RIDOTTO ? 0 : DURATA;
const GIRO = 2 * Math.PI * 35;
pieno.style.strokeDasharray = GIRO;
pieno.style.strokeDashoffset = GIRO;

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

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