Cum se creează un efect Parallax stratificat pe site-ul dvs.

Sep 14, 2025

să

(Credit de imagine: www.beargrylls.com)

Parallax Motion, conceptul de straturi în mișcare la viteze diferite, a fost folosit de ani de zile în animație. Site-ul oficial al Bear Grylls (unul dintre favoritele noastre Parallax de defilare a site-urilor ), are efect în direcții noi și interesante. Munții de fundal scalează în poziție în poziție, în timp ce se estompează astfel încât să devină complet opac, iar în fundalul paginii, textul "aventura" se ridică în spatele munților, în timp ce se estompează.

Pentru mai multe efecte de mișcare inspiratoare, verificați ghidul nostru pentru cele mai bune CSS animații și cum să le codifice .

Designul site-ului Bear Grylls este lucrarea Agenției de Marketing Creative din Marea Britanie Avanpost , și cu o audiență țintă, cuprinsă între 16 și 55 de ani și peste 7 milioane de adepți din întreaga lume, au avut o sarcină serioasă pe mâini.

"Principala caracteristică a site-ului a fost pagina de pornire; am vrut ca vizitatorii să sari literalmente în ecran și să se alăture urs pe aventurile sale", explică co-fondatorul Chris Wilcock și directorul creativ Dan Williams. "Pentru a realiza acest lucru, am utilizat niște tranziții inteligente, cuplate cu videoclipuri editate, imagini dramatice și limbajul general pe site."

Consultați site-ul în acțiune la www.beargrylls.com. . În acest articol, vom explica cum să recredem efectul pe site-urile proprii. Începeți Descărcarea fișierelor Tutorial .

01. Creați efectul de scalare

Structura pentru a permite întregului conținut de animație la lucru este relativ simplă. Un înveliș deține totul și ascunde orice conținut de depășire. Apoi, există, în esență, trei straturi de Tags Div în partea de sus.

 & Lt; Div clasa = "ambalaj" & gt;
& Lt; Div Clasa = "POS Text" & gt; / Lt; / Div & gt;
& Lt; Div clasa = "POS Munte1" & gt; / Lt; / Div & gt;
& Lt; Div Clasa = "POS Munte2" & GT; & Lt; / Div & Gt;
& lt; / div & gt;

02. Porniți CSS

Pentru a face designul, imaginea gradientului de fundal va fi adăugată la organism și se va seta pentru a umple dimensiunea ecranului. Învelișul conține toate straturile, iar deversarea pentru conținut este ascunsă astfel încât să se aplice efecte de scalare.

 corp {
Marja: 0;
Padding: 0;
Înălțime: 100%;
Fundal: URL (IMG / BG.JPG)
centru centru;
Dimensiune de fundal: acoperire;
}
.Wrapper {
Lățime: 100VW;
Înălțime: 100VH;
Poziție: rudă;
Depășirea: ascunsă;
}

03. Poziționați fiecare strat

Următorul cod asigură că fiecare strat este poziționat absolut, unul peste celălalt, în interiorul ambalajului. Dimensiunea acestui lucru umple lățimea și înălțimea de vizualizare, astfel încât imaginile să umple ecranul.

 .pos {
Poziție: absolută;
Top: 0;
stânga: 0;
Lățime: 100VW;
Înălțime: 100VH;
}

04. Adăugați textul

Clasa de text adaugă într-adevăr imaginea potrivită și stabilește poziția de pornire înainte de ao anima în poziție utilizând mișcarea cadre cheie care vor fi adăugate în ultimul pas.

 .Text {
Fundal: URL (img / text.png)
centru centru;
Dimensiune de fundal: acoperire;
Transformare: Translate3D (0, 30px, 0);
Opacitate: 0;
Animație: Mutarea 1.8s Suty-Out;
Animație-mod de umplere: înainte;
}

05. Animați primul munte

Primul munte este cel mai departe de ecran, iar acest lucru va obține o mică scalare care va fi animată. Opacitatea tuturor straturilor este, de asemenea, stabilită, astfel încât să figureze în poziție.

 .Mountain1 {
Fundal: URL (IMG / Mountain1.png)
centru centru;
Dimensiune de fundal: acoperire;
Transformare: Scale3d (1.1, 1.1, 1.1);
Opacitate: 0,2;
Animație: Scadrul 1S ușurință;
Animație-mod de umplere: înainte;
}

06. Animați muntele din prim plan

Muntele pentru prim plan este aproape identic cu celălalt munte - doar face mult mai mult o scală în poziție. Ambii munți împărtășesc cadrele cheie "scaler" pentru animația lor.

 .Mountain2 {
Fundal: URL (img / munte2.png)
centru centru;
Dimensiune de fundal: acoperire;
Transformare: Scale3D (1.3, 1.3, 1.3);
Opacitate: 0,1;
Animație: scumped 1.2s ușurință;
Animație-mod de umplere: înainte;
}

07. Adăugați animația KeyFrame

Efectuările cheie sunt acum create care specifică acest lucru. La starea de capăt a mișcării, acest stat final va fi ținut în vigoare. Textul este mutat în sus, iar munții sunt scalați în jos, pentru a se încadra în design.

 @kekeyframes mișcă {
100% {
Transformare: Translate3D (0, 0, 0);
Opacitate: 1;
}
}

@ scară @keyframes {
100% {
Transformare: Scale3D (1, 1, 1);
Opacitate: 1;
}
}

generate CSS — Ridicați un bilet pentru a genera CSS acum pentru o reducere mare (Credit Imagine: Viitor)

Acest articol a fost publicat inițial în numărul 289 din Web designer - Vânzare acum . Abonați-vă aici .

Citeste mai mult:

Cum se adaugă animație la SVG cu CSS
DOS și DONS pentru animațiile web încântătoare
Cum se proiectează cu forme CSS: o introducere

Cum se creează un efect Parallax stratificat pe site-ul dvs.

01. Creați efectul de scalare

02. Porniți CSS

03. Poziționați fiecare strat

04. Adăugați textul

05. Animați primul munte

06. Animați muntele din prim plan

07. Adăugați animația KeyFrame

să - Cele mai populare articole

Cum să trageți un leu

Începeți cu Adobe Dimensiuni CC

Vopsea Rippling Apă în uleiuri

Cum se creează active digitale

4 pași pentru o mai bună VDM cu Zbrush

12 sfaturi pentru iluminarea 3D realistă

Cum să sculptați în cinema 4d

Cum să capturați mișcarea în 3D-ul dvs. Renders

Categorii