CSS 3D · scale-drevet
ingen ekstra biblioteker
1 / 5

Ideen er at bryde med den lodrette scroll og i stedet skabe en fornemmelse af dybde. Tekst og billeder sidder på et kort — og når man scroller, forsvinder kortet ind i skærmen, som om man dykker ned i telefonen.

Teknisk bruger det CSS scale() og perspective: det forreste kort krymper ned til ingenting og blæses bagud, mens det næste rykker frem. Det er samme princip som AE Camera → dolly-track, men gjort i CSS og drevet af tryk eller scroll i stedet for keyframes.

Styrke

Giver et artikel-flow en rumlig fornemmelse — tydeligt hierarki og en klar navigationsretning der ikke er "ned ad siden".

Teknisk krav

CSS perspective-context og will-change. Scroll-events eller swipe-events til timing. Ingen tunge biblioteker.

CUE-note

Kræver fast højde-container og touch-swipe-understøttelse. Fallback til simpel slide ved prefers-reduced-motion.

Næste konkrete tests
Scroll-drevet versionKobl animationen direkte på fingerens scroll — kortene dykker i takt med bevægelsen.
Swipe på mobilSwipe-op oversættes til card-transition med haptisk feedback og momentum.
Blandede medierVideo-loop som baggrund på kortene — giver det mere eller forstyrrer det?
EksplainerformatHvert kort er ét trin i en forklaring — step-by-step med dybde-fornemmelse.