La pagina che diventa una carta

/* La pagina che diventa una carta
   La pagina non scorre: il primo gesto di scorrimento (o il pulsante) la rimpicciolisce in una carta,
   appoggiata in basso al centro, mentre sopra arrivano quattro carte alte, una per paesaggio.
   Scegliendone una, la sua pagina sale nello spazio libero sotto un velo scuro e poi si allarga a tutto
   schermo mentre le carte ricadono. La carta del paesaggio in cui sei diventa "Inizio". */
gsap.registerPlugin(CustomEase);
CustomEase.create('mazzo', 'M0,0 C0.7,0.6 0,1 1,1');

/* ---- valori da cambiare ---- */
const DURATA = 1;            /* secondi della pagina che si fa carta (e che torna pagina) */
const SFASATURA = 0.047;     /* secondi fra una carta e la successiva */
const VELO = 0.5;            /* quanto si scurisce la pagina che se ne va */
const VELOCITA = 15;         /* secondi perché la parola grande attraversi uno schermo */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const guscio = document.querySelector('[data-guscio]');
const mazzo = document.querySelector('[data-mazzo]');
const carte = [...mazzo.querySelectorAll('.carta')];
const velo = document.querySelector('.velo-scambio');
const pagine = Object.fromEntries([...document.querySelectorAll('[data-pagina]')].map((p) => [p.dataset.pagina, p]));
const ORDINE = carte.map((c) => c.dataset.carta);

/* ogni carta ricorda la sua faccia di paesaggio; quella del paesaggio in cui sei mostra "Inizio" */
const facce = new Map(carte.map((c) => [c, {
  nome: c.querySelector('.carta__nome').textContent,
  testo: c.querySelector('.carta__testo').innerHTML,

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

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