Continua a scorrere

/* Continua a scorrere
   In fondo a ogni capitolo c'è la carta del capitolo dopo. Se continui a scorrere oltre la fine, un
   anello al centro dello schermo si riempie; quando è pieno la carta si stacca, si allarga a tutto
   schermo e poi, dentro la pagina nuova, si rimpicciolisce fino al suo quadro. I capitoli sono tre ore
   del giorno e l'ultima porta alla prima: non si arriva mai a un piè di pagina. */
gsap.registerPlugin(CustomEase);
CustomEase.create('pagina', 'M0,0 C0.5,0.2 0,1 1,1');

/* ---- valori da cambiare ---- */
const TOCCO = matchMedia('(hover: none), (pointer: coarse)').matches;
const SOGLIA = TOCCO ? 900 : 1100;   /* quanti pixel di scorrimento oltre la fine servono */
const RIEMPIE = 0.042;              /* quanto in fretta l'anello insegue lo scorrimento */
const SVUOTA = 0.16;                /* quanto in fretta si svuota se torni indietro o ti fermi */
const ATTESA_SVUOTA = 900;          /* millisecondi fermi prima che l'anello si svuoti da solo */

const CAPITOLI = [
  { id: 'alba', nome: 'Alba', ora: '06:10', tinta: '#F3C6A8', inchiostro: '#3A2230',
    frase: 'Il giorno comincia piano: prima la luce, poi i rumori.',
    testi: ['Alle sei il cielo è ancora indeciso fra il rosa e il grigio.', 'Poi il mare si accende, un pezzo alla volta.'] },
  { id: 'meriggio', nome: 'Meriggio', ora: '13:00', tinta: '#F2D16B', inchiostro: '#2B2A1E',
    frase: 'A mezzogiorno le ombre si nascondono sotto le cose.',
    testi: ['Il sole sta dritto sopra l’albero e l’ombra è un tappeto.', 'Si parla piano, come se il caldo potesse sentire.'] },
  { id: 'tramonto', nome: 'Tramonto', ora: '19:40', tinta: '#3B2A4F', inchiostro: '#F6E9D8',
    frase: 'La sera arriva da dietro le colline, e colora tutto.',
    testi: ['Il sole si appoggia sulle colline e diventa enorme.', 'Poi resta solo l’arancio, e dopo un po’ nemmeno quello.'] },
];

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

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