Premessa
Lo scroll video è l’effetto in cui un video si riproduce dal primo all’ultimo fotogramma seguendo lo scroll: fermi lo scroll e il video si ferma, risali e torna indietro. La sezione è pinnata a tutto schermo e tutto lo scorrimento è mappato sull’intera durata del video.
Vale la pena di chiarire un equivoco. L’effetto celebre delle pagine Apple, all’apparenza identico, non scrubba un elemento <video>: disegna una sequenza di immagini su un canvas, ed è per questo che resta fluido anche su iPhone. Qui ho scelto la via diretta, lo scrub del currentTime di un vero <video> dalla libreria media: semplice, leggero, ottimo su desktop. Su iOS il seeking del video è meno fluido (è un limite del decoder, non del plugin), ed è un compromesso consapevole.
Si sceglie il riempimento (cover o contain, per gestire video orizzontali e verticali) e la lunghezza dello scroll, cioè quanto bisogna scorrere perché il video arrivi alla fine.
Provalo dal vivo
Scorri: il video avanza fotogramma per fotogramma seguendo lo scroll; risali e torna indietro. (Il filmato qui è una clip di test.)
Come degrada
Senza JavaScript o in modalità ridotta resta un video normale nel flusso, responsive e fermo sul poster: niente blocco dello scroll, niente scrub.
Per maggiori informazioni contattami: info@davidemugnaini.it.