Image Animation Scroll — Come vi dicevo nel video precedente, gestire in JavaScript l’evento scroll dell’intera finestra del browser, o di un determinato elemento, ci permette di realizzare, dei bellissimi progetti web.

Visitando il sito della Apple, nella pagina relativa alla presentazione degli AirPods ho notato che allo scrollando, si attiva l’evento scroll di javascript che richiama una serie di immagini che si susseguono una dopo l’altra in modo fluido e perfettamente sincronizzato con lo scroll di pagina sia esso in basso che verso l’alto.

Questo bellissimo effetto mi ha subito sbalordito!

Come lo hanno realizzato?
Certamente qui il protagonista è javascript, e ovviamente, la magistrale gestione dell’evento scroll della pagina, ma c’è dell’altro. C’è una sequenza di immagini che si sussegue all’avanzare dello scroll della pagina, tipo un Flip-book, per intenderci, quei libricini che facendo scorrere le pagine velocemente possiamo vedere l’animazione, in ogni pagina c’è disegnato un frame successivo alla pagina precedente, il sistema è questo!

Se ispezioniamo il codice della pagina, non riusciamo ad individuare le immagini, ma vediamo solo uno o più elementi Canvas.

Il sistema è quello delle canvas.
Ma come implementarlo?
Vediamolo subito realizzando un piccolo progetto a cui ho dato il nome di Pianeta Terra!