Baggrund — langsom
Mellemgrund — kugle
Forgrund — hurtig

Tricket er parallax: kuglen er fast i viewporten, men de tre lag bevæger sig med forskellig hastighed — baggrunden langsomt, mellemgrunden medium, forgrunden hurtigt. Det er det der skaber dybdefornemmelsen.

Det interessante testscenarie er sceneskiftet: kuglen trækker sig tilbage til baggrunden. I AE-sprog: kuglen skifter til et lag længere bagved i camera-space. Forgrunden og mellemgrunden passerer nu foran den, og den er visuelt "inde i" scenen i stedet for foran den.

Teknik

Canvas-animation med tre uafhængige offset-variable. Hvert lag scrolles med sin egen hastighed. Kuglen er fast i viewporten og roterer for at simulere rulning.

Brugssituation

Explainer-format med en figur der bevæger sig gennem scener: valgkamp, bybillede, historiespor. Forgrunden kan bære tekstelementer.

Næste trin

Koble på scroll: hvert pixel scroll flyttes verdens-offset én enhed. GSAP ScrollTrigger er oplagt her.

Næste konkrete tests
Scroll-drevetBind world-offset direkte til window.scrollY — brugeren scroller artiklen, verden ruller forbi.
Figur i stedet for kugleErstat kuglen med en Lottie-animation eller sprite — en løbende person, en bil, et fly.
Tekst i forgrundenFG-laget bærer tekstbokse der glider forbi — nøgletal, quotes, kapiteloverskrifter.
Triggerspot-baseretSceneskifte sker automatisk ved en bestemt scroll-position — figuren trækker sig til baggrunden midt i en historiepassage.