Få billedet til at bevæge sig 75vh nedad og tone helt ud, mens du scroller de første 100vh. Udfyld @keyframes move med translate og opacity, og knyt animationen til scroll() vha. animation-timeline på img.
Lad animationen køre lineært, afgræns forløbet med animation-range, og sørg for, at billedet forbliver skjult bagefter. Prøv derefter at afslutte animationen ved 50vh, og bemærk, hvordan tempoet ændres. I previewet svarer 100vh til scrollportens højde.
Hints
-
animation -
animation-timeline -
animation-range -
translate -
opacity
-
scroll() -
0 100vh -
both