Hopp til innhold
← KolofonDesignelementanimation-timeline

Scroll-drevne animasjoner

Lesefremdriften, kort som glir inn og stabler som krymper styres av scrollposisjonen, i ren CSS uten én linje JavaScript.

CSS har fått animation-timeline: scroll() og view(). En animasjon kan dermed knyttes til hvor langt du har scrollet, eller til hvor et element befinner seg i synsfeltet, i stedet for til tid.

Fremdriftslinjen øverst i artikler er en scaleX-animasjon på scroll(root). Kortene i bento-gridet bruker view() med animation-range, slik at de glir inn med rotasjon og uskarphet. Kolofon-kortene på forsiden ligger klistret og krymper når neste kort dekker dem.

Alt sitter bak @supports. Nettlesere uten støtte viser innholdet statisk, og «redusert bevegelse» skrur alt av.

.reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 28%;
}

I koden: app/globals.css

Neste bit

Kolofon · Teknologi05

React 19.3

View Transitions mellom sider

Når du klikker et kort, flyr bildet og tittelen over til artikkelen i stedet for å forsvinne og dukke opp igjen.

Kolofon · Designelement06

CSS grid · @property

Bento-grid med levende kanter

Innleggene ligger i et asymmetrisk rutenett der hvert kort har sin egen størrelse, sin egen generative farge og en kant som roterer.

Kolofon · Designelement07

Pointer events

Egen markør og magnetiske knapper

Markøren er en sirkel i blandingsmodus «difference» som vokser over lenker. Knappene trekkes mot pekeren som magneter.

⌘KESC