Hvordan lage en lagdelt parallaxeffekt på nettstedet ditt

Jan 25, 2026

hvordan

[1. 3]

(Bildekreditt: www.beargrellls.com)

Parallax bevegelse, begrepet bevegelige lag med forskjellige hastigheter, har blitt brukt i årevis i animasjon. Den offisielle nettsiden til Bear Grylls (en av vår favoritt parallax scrolling nettsteder ), tar effekten i nye og interessante retninger. Bakgrunnsfjellene skaler seg i posisjon, mens de falmer opp slik at de blir helt ugjennomsiktige, og i bakgrunnen av siden stiger teksten 'Eventyr' opp på plass bak fjellene som det falmer inn.

For mer inspirerende bevegelseseffekter, sjekk ut vår guide til det beste CSS animasjoner og hvordan å kode dem .

Bear Gryllls Site Design er arbeidet i Storbritannia Creative Marketing Agency Utpost , og med et målgruppe som strekker seg fra 16 til 55 år, og over 7 millioner tilhengere over hele verden, hadde de en seriøs oppgave på hendene.

"Hovedfunksjonen til nettstedet var hjemmesiden; Vi ønsket at besøkende bokstavelig talt hopper inn på skjermen og deltar på hans opplevelser," forklare medstifter Chris Wilcock og kreativ direktør Dan Williams. "For å oppnå dette, brukte vi noen smarte overganger, kombinert med redigert videoer, dramatisk bilder og det overordnede språket på nettstedet."

Se nettstedet i aksjon på www.beargrells.com. . I denne artikkelen vil vi forklare hvordan man gjenoppretter effekten på dine egne nettsteder. Start av Laster ned opplæringsfilene .

01. Lag skaleringseffekten

Strukturen for å tillate alt animerende innhold til arbeid er relativt enkelt. En wrapper holder alt, og skjuler eventuelle overfylte innhold. Deretter er det i hovedsak tre lag av div-koder over toppen.

 & lt; div class = "wrapper" & gt;
& lt; div class = "POS Tekst" & gt; & lt; / div & gt;
& lt; div class = "POS Mountain1" & gt; & lt; / div & gt;
& lt; div klasse = "POS Mountain2" & gt; & lt; / div & gt;
& lt; / div & gt;

02. Start CSS

For å gjøre designen, vil bakgrunnsgradienten bli lagt til i kroppen og sette til å fylle størrelsen på skjermen. Kapperen holder alle lagene, og overløpet for innhold er skjult slik at skaleringseffekter kan påføres.

 Kropp {
margin: 0;
polstring: 0;
Høyde: 100%;
Bakgrunn: URL (IMG / BG.JPG)
senter senter;
Bakgrunnsstørrelse: Deksel;
}
.wrapper {
Bredde: 100vw;
Høyde: 100VH;
posisjon: relativ;
Overflow: Skjult;
}

03. Plasser hvert lag

Neste kode sikrer at hvert lag er plassert helt, en over den andre, inne i innpakningen. Størrelsen på dette fyller visningsportbredden og høyden, slik at bildene fyller på skjermen.

 .pos {
posisjon: absolutt;
Topp: 0;
Venstre: 0;
Bredde: 100vw;
Høyde: 100VH;
}

04. Legg til teksten

Tekstklassen legger egentlig bare til det riktige bildet, og setter sin startposisjon før du animerer den på plass ved hjelp av Flytte opp nøkkelrammer som vil bli lagt til i det siste trinnet.

 .Text {
Bakgrunn: URL (IMG / TEXT.PNG)
senter senter;
Bakgrunnsstørrelse: Deksel;
forvandle: translate3d (0, 30px, 0);
opasitet: 0;
Animasjon: Flytting 1.8s brukervennlighet;
animasjon-fyll-modus: fremover;
}

05. Animere det første fjellet

Det første fjellet er den ene lenger unna skjermen, og dette vil få en liten skalering som vil bli animert. Opaciteten til alle lagene er også satt lavt slik at de vises på plass.

 .mountain1 {
Bakgrunn: URL (IMG / Mountain1.png)
senter senter;
Bakgrunnsstørrelse: Deksel;
Transform: Scale3D (1.1, 1.1, 1.1);
opasitet: 0,2;
Animasjon: Scaler 1s brukervennlighet;
animasjon-fyll-modus: fremover;
}

06. Animere forgrunnen

Fjellet for forgrunnen er nesten identisk med det andre fjellet - det gjør bare mye mer av en skala på plass. Begge fjellene deler "Scaler" Keyframes for deres animasjon.

 .Mountain2 {
Bakgrunn: URL (IMG / Mountain2.png)
senter senter;
Bakgrunnsstørrelse: Deksel;
Transform: Scale3D (1.3, 1.3, 1.3);
Opacity: 0,1;
Animasjon: Scaler 1.2s brukervennlighet;
animasjon-fyll-modus: fremover;
}

07. Legg til keyframe animasjon

Keyframes er nå opprettet som spesifiserer det. På slutten av bevegelsen vil denne sluttstaten bli holdt på plass. Teksten er flyttet, og fjellene er nedskalert, for å passe inn i designet.

 @keyframes flytte {
100% {
forvandle: translate3d (0, 0, 0);
opasitet: 1;
}
}

@keyframes Scaler {
100% {
Transform: Scale3D (1, 1, 1);
opasitet: 1;
}
}

generate CSS — Plukk opp en billett for å generere CSS nå for en stor rabatt (Bildekreditt: Fremtid)

Denne artikkelen ble opprinnelig publisert i utgave 289 av Webdesigner - på salg nå . Abonner her .

Les mer:

Slik legger du animasjon til SVG med CSS
Dos og Don'ts for herlige web animasjoner
Hvordan designe med CSS-figurer: En introduksjon

Hvordan lage en lagdelt parallaxeffekt på nettstedet ditt

01. Lag skaleringseffekten

02. Start CSS

03. Plasser hvert lag

04. Legg til teksten

05. Animere det første fjellet

06. Animere forgrunnen

07. Legg til keyframe animasjon

hvordan - Mest populære artikler

Hvordan teste reagere Nettsteder og Apps

Bygg en stemme kontrollert UI

10 ting du ikke visste at du kunne gjøre med Photoshop

Hvordan lage et digitalt oljemaleri ved hjelp av Artrage

Slik bruker du digitale verktøy for å lage et håndtegnet utseende

Hvordan tegne en våt figur

Tekstur En autentisk slitt K-2SO DROID

Lag et furry 3D-tegn fra Scratch

Kategorier