2,5D multiplane parallakse
En scrolldrevet demo av multiplane-teknikken: én malt landsby delt i over 50 flate gjennomsiktige lag og et kamera som beveger seg fremover gjennom dem. Under finner du en kort guide for deg som utforsker ideen.
Hva er en multiplane parallakseffekt?
En multiplane parallakseffekt, ofte kalt 2,5D, bygger en scene av flere flate, gjennomsiktige bilder som ligger i ulik avstand fra betrakteren. Når kameraet beveger seg, flytter hvert lag seg ulikt mye, og en flat illustrasjon føles som en tredimensjonal verden. Det brukes ingen 3D-modeller, bare illustrasjon og transformasjoner.
Ideen kommer fra multiplane-kameraet, som ble utviklet ved Walt Disney Studio på 1930-tallet. Malte glassplater ble stablet under et kamera, og kameraet beveget seg mot dem, så forgrunn, mellomgrunn og bakgrunn forskjøv seg i ulik fart. The Old Mill (1937) og Snøhvit og de syv dvergene (1937) brukte det.
Slik fungerer det på nett
Hvert lag har en avstand fra kameraet. Når kameraet beveger seg fremover, tegnes et lag i avstand z i en skala lik z delt på det som er igjen mellom laget og kameraet. Nære lag vokser raskt og feies ut forbi kantene på skjermen, mens fjerne lag knapt endrer seg. Sidelengs bevegelse fungerer likt: nærmere lag glir lenger.
Siden fester én fullskjermscene og knytter kameraet til hvor langt du har scrollet, så scrollingen oppleves som en reise fremover og ikke som en side som flytter seg oppover. Denne demoen er bygget med:
- Gjennomsiktige WebP- eller AVIF-lag, alle på samme lerretsstørrelse og på linje
- Bare CSS-transformasjoner (translate3d og scale) og opacity
- Én requestAnimationFrame-løkke som skriver rett til DOM
- position: sticky for den festede scenen, uten at scrollingen kapres
- Ingen WebGL, ingen Three.js og ingen animasjonsbibliotek
Multiplane parallakse mot vanlig parallakse-scrolling
Klassisk parallakse-scrolling flytter bakgrunner i ulik loddrett fart. Det er enkelt, men det blir flatt: ingenting kommer noen gang nærmere. En multiplane-scene flytter kameraet gjennom lagene. Forgrunnen blir større og forsvinner ut av bildet, bygninger vokser og de fjerne fjellene blir stående. Det er forskjellen på bilder som glir og en reise gjennom et sted.
Slik forbereder du illustrasjonen til en 2,5D-scene
Illustrasjonen betyr mer enn koden. Noen regler gjør effekten troverdig:
- Del scenen i 4 til 7 dybdegrupper, for eksempel himmel, fjerne fjell, åser, bygninger, trær og forgrunn.
- Eksporter hvert lag på samme lerretsstørrelse, på linje, med gjennomsiktighet der ingenting skal synes.
- Mal forbi kantene og bak overlappinger, så bevegelse aldri avslører et hull.
- Legg luftperspektiv inn i bildet: fjerne lag lysere, blåere og mykere, nære lag mørkere og mer mettet.
- Bruk optimalisert WebP eller AVIF, og vis en flatet poster til første visning.
Ytelse, tilgjengelighet og SEO
En 2,5D-scene skal være rask og fortsatt brukbar. Animer bare transform og opacity, kjør én animasjonsløkke og pause den når scenen er utenfor skjermen. Send en flatet poster først, så den største visningen er én forespørsel, og last lagene etterpå.
Forenkle bevegelsen på mobil, respekter prefers-reduced-motion og la all tekst ligge i HTML-en, så søkemotorer og skjermlesere leser siden slik en besøkende gjør. Gi folk en måte å hoppe over scenen på.
Når bør du bruke den, og når ikke
Den passer godt til hero-scener, produktlanseringer, porteføljer, kampanjesider og merkevarehistorier, der ett sterkt bilde bærer budskapet. Den passer dårlig til tett innhold, betalingsløp og alt folk skanner raskt. Hold deg til én scene per side.
Spørsmål folk stiller
Er 2,5D det samme som 3D?
Nei. En 2,5D-scene er laget av flate bilder ordnet i dybden. Det finnes ingen 3D-modeller, lys eller geometri, bare lag, skala og bevegelse, og derfor er den lett nok for en vanlig nettside.
Trenger jeg Three.js eller WebGL?
Nei. CSS-transformasjoner og en liten animasjonsløkke er nok. De bruker mindre batteri og er enklere å gjøre tilgjengelige enn en 3D-motor.
Hvor mange lag bør en scene ha?
For de fleste sider er fire til sju dybdeplan nok: færre føles flatt, flere gir vekt. Denne demoen er bevisst en utstilling. Den deler maleriet i over 50 små utklipp (klokketårnet, husene, trærne, blomstene, skyene) fordelt på seks dybdegrupper, og holder seg lett fordi hvert utklipp er beskåret til sin egen form i stedet for å være et lag over hele skjermen.
Gjør det nettsiden min tregere eller skader SEO?
Ikke hvis det er bygget med omhu: en flatet poster til første visning, lag som lastes etterpå, bare transform og opacity animert, og all tekst i HTML-en.
Fungerer det på mobil?
Ja, i en enklere form. Scrolldrevet reise fungerer med berøring, mens pekereffekter er slått av og bevegelsen er redusert. Besøkende som foretrekker redusert bevegelse får en stille versjon.
Kan Mediseo bygge noe slikt til nettsiden min?
Ja. Vi tegner illustrasjonen, bygger scenen og trimmer den for fart og tilgjengelighet. Book en gratis prat, så sier vi ærlig fra om det passer for merkevaren din.