Motion
Herunder ligger en pakke, værktøjet selv har skrevet ud, kørt på husets eget site med den kode, der står i vejledningen. Det er ikke en optagelse af en animation. Det er billeder, din scroll bladrer i.
Scroll ned. Produktet står stille, når du gør.
Syv sekunder video blev til en billedsekvens. Smart Frames så videoen igennem og lagde billederne, hvor der sker noget, så der er færre filer end sekunder ville kræve. Der hentes ikke det hele på én gang: første billede kommer med det samme, og resten følger efter i en lille bølge omkring dét, du er ved at se.
Tre linjer og en mappe med statiske filer. Ingen pakkemanager, intet byggetrin, ingen server, der skal køre noget. Den her side gør præcis det samme som eksemplet i pakken.
<link rel="stylesheet" href="/motion-demo/scroll-animation.css">
<div data-motion="/motion-demo/"></div>
<script src="/motion-demo/scroll-animation.js" defer></script>