Il titolo che si alza dalla linea

/* Il titolo che si alza dalla linea
   Una finestrella al centro sfoglia i fotogrammi come un proiettore: ognuno scende dall'alto con un
   clip-path e copre il precedente. L'ultimo si ingrandisce oltre lo schermo mentre la finestra si apre
   a tutto campo; il titolo, schiacciato fino a sembrare una riga gialla, si alza alla sua altezza e le
   didascalie si separano per incorniciarlo. Chiude un lampo di fotogrammi dietro le lettere. */

/* ---- valori da cambiare ---- */
const SCATTO = 0.3;            /* secondi fra un fotogramma e il successivo nella finestrella */
const INGRANDIMENTO = 1.2;     /* di quanto l'ultimo fotogramma supera lo schermo quando esplode */
const LAMPO = 0.12;            /* secondi per fotogramma nel lampo finale (0 lo toglie) */
const VELO = 0.5;              /* quanto si scurisce la foto sotto il titolo */
const ALTEZZA_MAX = 0.62;      /* il titolo non supera questa frazione dell'altezza dello schermo */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const apertura = document.querySelector('.apertura');
const finestra = document.querySelector('.finestra');
const fotogrammi = [...document.querySelectorAll('.fotogramma')];
const ultimo = fotogrammi[fotogrammi.length - 1];
const titolo = document.querySelector('.titolo');
const dentro = document.querySelector('.titolo__dentro');
const righe = [...document.querySelectorAll('.didascalia span')];
const velo = document.querySelector('.velo');
const rivedi = document.querySelector('.rivedi');
let tl = null;
let finito = false;

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

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