Scrollmation
0
chargement de la séquence…

Séquence 01

Alabama Hills,
au pied de la Sierra

Scrollez pour avancer dans la séquence ↓

Séquence 02

Le grand erg,
à la lumière rasante

Comment ça marche

La vidéo devient une timeline
que l'on parcourt au doigt.

Chaque image de la séquence est décodée une fois, en tâche de fond, puis dessinée à la demande : le scroll n'est plus une lecture mais une position. Aucune saccade, aucun rattrapage, une image pour chaque pixel défilé.

Randonneuse bras ouverts devant la Sierra Nevada
WebCodecsDécodage matériel dans un worker, 420 images en moins d'une seconde.
Rochers granitiques des Alabama Hills
OffscreenCanvasLe worker dessine directement, le thread principal ne fait que scroller.
Sommets enneigés au-dessus des rochers
HotspotsDes boutons DOM suivent un point de l'image, interpolés entre keyframes.

Sous le capot

Léger pour la page,
lourd pour la carte graphique.

Le fichier mp4 est mis en cache, la mémoire est rendue à chaque changement de séquence, et le décodeur bascule tout seul en logiciel si le matériel refuse. Le reste, c'est du scroll.

Silhouette d'un marcheur sur une crête de dune
TrajectoiresUn outil de pointage intégré capture les keyframes clic par clic, dans le repère de la vidéo.
Dunes au coucher du soleil
Fondu et stickyGSAP ScrollTrigger orchestre les scènes fixes, les fondus et l'apparition des contenus.
2séquences
817images décodées
< 1 sde décodage matériel
0image dessinée par le thread principal