Sådan oprettes en lagdelt parallaxffekt på dit websted

Sep 12, 2025
hvordan
layered parallax effect
(Billedkredit: www.beargyls.com)

Parallax Motion, begrebet flytende lag med forskellige hastigheder, er blevet brugt i årevis i animation. Den officielle hjemmeside for Bear Grylls (en af ​​vores foretrukne Parallax Scrolling Sites. ), tager effekten i nye og interessante retninger. Baggrunden bjerge skala ned i position, mens de falder op, så de bliver fuldt uigennemsigtige, og i baggrunden af ​​siden stiger teksten 'Adventure' op på plads bag bjergene, da det falder ind.

For mere inspirerende bevægelseseffekter, tjek vores guide til det bedste CSS animationer og hvordan man kan kode dem .

Bear Grylls Site Design er arbejdet i UK Creative Marketing Agency Outpost. , og med en målgruppe, der spænder fra 16 til 55 år, og over 7 millioner tilhængere over hele verden, havde de en seriøs opgave på deres hænder.

"Hovedfunktionen hos hjemmesiden var hjemmesiden; Vi ønskede, at besøgende skal bogstaveligt talt springe ind på skærmen og slutte bjørn på hans eventyr," forklare medstifter Chris Wilcock og Creative Director Dan Williams. "For at opnå dette udnyttede vi nogle kloge overgange, kombineret med redigerede videoer, dramatiske billeder og det overordnede sprog på webstedet."

Se webstedet i aktion på www.beargyls.com . I denne artikel vil vi forklare, hvordan vi skal genskabe effekten på dine egne websteder. Start byen Downloading af vejledningsfilerne .

01. Opret skaleringseffekten

Strukturen for at tillade alt det animerende indhold at arbejde er relativt simpelt. En wrapper holder alt, og skjuler ethvert overløbsindhold. Så er der i det væsentlige tre lag Div-tags over toppen. 

 & lt; div class = "wrapper" & gt;
& lt; div class = "POS TEXT" & GT; & lt; / div & gt;
& lt; div class = "POS Mountain1" & GT; & lt; / div & gt;
& lt; div class = "POS Mountain2" & GT; & lt; / div & gt;
& lt; / div & gt;

02. Start CSS

For at lave designet vil baggrundsgradientbilledet blive tilføjet til kroppen og indstillet til at fylde skærmens størrelse. Wrapper holder alle lagene, og overløbet for indhold er skjult, så skaleringseffekter kan anvendes. 

 krop {
Margin: 0;
Padding: 0;
Højde: 100%;
BAGGRUND: URL (IMG / BG.JPG)
center center;
Baggrundsstørrelse: Dæk;
}
.wrapper {
Bredde: 100VW;
Højde: 100Vh;
position: relativ;
Overløb: Skjult;
}

03. Placer hvert lag

Den næste kode sikrer, at hvert lag er placeret absolut, den ene over den anden, inde i indpakningen. Størrelsen af ​​dette fylder visningsportbredden og højden, så billederne fylder skærmen. 

. Pos {
position: absolut;
TOP: 0;
Venstre: 0;
Bredde: 100VW;
Højde: 100Vh;
}

04. Tilføj teksten

Tekstklassen tilføjer kun det rigtige billede, og sætter sin startposition, før du animerer det på plads ved hjælp af Moveup. keyframes, der vil blive tilføjet i det sidste trin. 

 .TEXT {
Baggrund: URL (IMG / Text.png)
center center;
Baggrundsstørrelse: Dæk;
Transform: Oversæt3d (0, 30px, 0);
Opacitet: 0;
Animation: Flyt 1,8s lette;
Animation-Fill-Mode: fremad;
}

05. Animere det første bjerg

Det første bjerg er det endnu væk fra skærmen, og det vil få en lille skalering, der vil blive animeret. Opaciteten af ​​alle lagene er også sat lavt, så de vises på plads. 

 .mountain1 {
Baggrund: URL (IMG / Mountain1.png)
center center;
Baggrundsstørrelse: Dæk;
Transform: SCALE3D (1.1, 1.1, 1.1);
Opacitet: 0,2;
Animation: Scaler 1S lette;
Animation-Fill-Mode: fremad;
}

06. Animér forgrundsbjerget

Bjerget til forgrunden er næsten identisk med det andet bjerg - det gør bare meget mere af en skala på plads. Begge bjerge deler 'Scaler' keyframes for deres animation. 

 .mountain2 {
Baggrund: URL (IMG / Mountain2.png)
center center;
Baggrundsstørrelse: Dæk;
Transform: SCALE3D (1,3, 1,3, 1.3);
Opacitet: 0,1;
Animation: Scaler 1.2s lette;
Animation-Fill-Mode: fremad;
}

07. Tilføj keyframe animation

Keyframes er nu oprettet, der specificerer det. I slutningen af ​​bevægelsen afholdes denne sluttilstand på plads. Teksten flyttes op, og bjergene skaleres ned, passer ind i designet. 

 @Keyframes moveup {
100% {
Transform: Translate3D (0, 0, 0);
Opacitet: 1;
}
}

@Keyframes scaler {
100% {
Transform: SCALE3D (1, 1, 1);
Opacitet: 1;
}
}

generate CSS

Hent en billet til at generere CSS nu for en stor rabat (Billedkredit: fremtiden)

Denne artikel blev oprindeligt offentliggjort i udstedelse 289 af Webdesigner - Til salg nu . Abonner her .

Læs mere:

  • Sådan tilføjes animation til SVG med CSS
  • Dos og don'ts for dejlige web animationer
  • Sådan designes med CSS-figurer: En introduktion

hvordan - Mest populære artikler

Sådan gør du realistiske gennemsigtige overflader

hvordan Sep 12, 2025

Oprettelse af et gennemsigtigt materiale som glas virker nemt - bare øge skyderen på gennemsigtigheden til 100, og jobbet er f�..

genskabe en manga klassisk

hvordan Sep 12, 2025

Jeg har været en enorm manga fan siden barndommen, og det er umuligt at skjule den indflydelse, som lidenskaben har på min kuns..

Sådan maler du en farverig zombie

hvordan Sep 12, 2025

Jeg har altid ønsket det udøde, og vil ofte rod for den ragged underdog, der så ofte reduceres til et bevægeligt mål. Mange ..

Master bro værktøjet

hvordan Sep 12, 2025

Hvad er bro-værktøjet? Hvis du er ny til CGI, er der alt for mange værktøjer til at vælge imellem i et svimlen..

Mal et originalt Tarot-kort

hvordan Sep 12, 2025

Da jeg modtog mit første Tarot Deck, blev jeg fortryllet af det smukke kunstværk og de historier, der fulgte med hvert kort. De..

Hemmelighederne for at opfylde en kreativ design brief

hvordan Sep 12, 2025

En af mine vejledere fortalte mig engang, at hvis han var låst op i fængslet for resten af ​​sit liv, med intet andet end en pen og papir, ville han ikke skrive en ting, bortset fra må..

Oplev stil og stof af typografi

hvordan Sep 12, 2025

Afgørelser, beslutninger, beslutninger ... Hvis der er et centralt aspekt til processen med at arbejde med type, er det, at designeren eller typografen skal gøre en lang række beslutninger..

Kom i gang med prototyping i Adobe XD

hvordan Sep 12, 2025

Da efterspørgslen efter UX Design Professionals fortsætter med at vokse, søger designere efter nemme at bruge værktøjer, der er stærke nok til at skabe prototyper af høj kvalitet, men ..

Kategorier