Creare un video da un sito: come farlo scorrere automaticamente

Apri la pagina, apri i DevTools (F12, oppure ⌥ ⌘ I su Mac), incolla questo nella Console e premi Invio. Aspetta tre secondi per darti il tempo di avviare il registratore, poi scorre dall’alto in basso lungo una curva ease-in-out nel tempo che hai impostato.

const SECONDS = 20;        // quanto dura lo scorrimento
const WAIT = 3;            // tempo per avviare il registratore

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' è importante. Molti siti impostano scroll-behavior: smooth, che trasforma ognuno dei piccoli spostamenti dello script in un’animazione a sé e riporta subito gli scatti.
• requestAnimationFrame sposta la pagina una volta per ogni fotogramma mostrato, quindi lo scorrimento è regolare quanto lo schermo permette.
• Prima di eseguirlo, scorri una volta a mano fino in fondo e torna su, così le immagini caricate in differita sono già al loro posto e l’altezza della pagina non cambia a metà ripresa.
• I siti costruiti su una libreria di smooth scroll come Lenis o Locomotive Scroll gestiscono lo scorrimento da soli e possono contrastare lo script. Se la pagina procede a strattoni, il motivo è quello.

Uno script lascia comunque il frame rate al tuo registratore e al tuo computer. Un renderer elimina entrambi: Website Scroll Video legge tutta la pagina una volta, poi calcola dove deve trovarsi in ogni fotogramma di un video a 24, 30 o 60 fps bloccati, così una pagina pesante non può perdere fotogrammi e una lunga non può andare fuori tempo. Imposti le stesse cose dello script, in secondi e per curva, e guardi l’anteprima del risultato prima di spendere qualcosa.

Misura la pagina in schermate: l’altezza totale divisa per l’altezza della finestra. Una landing page tipica va da cinque a otto schermate. Poi:

Più veloce di una schermata al secondo e il testo si impasta in una scia, soprattutto a 30 fps o in una GIF. Più lento di tre e chi guarda si distrae. Quando una sezione conta più delle altre, una pausa su di essa funziona meglio che rallentare tutta la pagina; Website Scroll Video ne consente fino a 6, ciascuna tra 0,5 e 5 secondi.

• Fluido (ease-in-out). Parte da fermo, viaggia, si ferma. L’impostazione predefinita giusta: entrambe le estremità sembrano volute, non troncate.
• Planato (ease-out). Parte veloce e scivola fino a fermarsi, come una spinta sul trackpad. Ottimo per teaser brevi che devono aprire con energia.
• Lineare. Una sola velocità dall’inizio alla fine. Il migliore per un loop di sfondo, dove ogni cambio di ritmo attira l’occhio.
• Pulsato. Scorre di una sezione, si assesta, riparte. Sembra qualcuno che sfoglia il sito, e si adatta ai tour di prodotto.

Un video che scorre verso il basso e poi salta di colpo in cima ha uno stacco visibile quando ricomincia. Fai invece scorrere la pagina verso il basso e di nuovo su lungo la stessa curva: l’ultimo fotogramma coincide con il primo e il loop è continuo. In Website Scroll Video è la riproduzione «Scendi e torna», con una sosta facoltativa in fondo prima del ritorno e in cima prima che il loop ricominci.