Hogyan készítsünk egy rétegelt parallaxhatást a webhelyére

Sep 11, 2025

kézikönyv

(Kép hitel: www.beargryls.com)

A parallaxis mozgás, a mozgó rétegek fogalma különböző sebességgel, évek óta használják az animációt. A Medve Grylls hivatalos honlapja (az egyik kedvencünk Parallaxis görgetési oldalak ), az új és érdekes irányokba lép. A háttér hegyek lépték le a helyzetbe, miközben elhalványulnak úgy, hogy teljesen átlátszatlanokká váljanak, és az oldal hátterében a "kaland" szöveg felemelkedik a hegyek mögött, ahogyan elhalványul.

Az inspiráló mozgási hatásokért nézze meg a legjobb iránymutatást CSS animációk és hogyan kell kódolni őket .

A Bear Grylls Site Design az Egyesült Királyság kreatív marketing ügynöksége munkája Előőrs , és egy célközönség 16-55 éves korig, és több mint 7 millió követő világszerte, komoly feladatuk volt a kezükön.

"A honlap fő jellemzője a honlap volt; azt akartuk, hogy a látogatók szó szerint ugorjanak a képernyőre, és csatlakozzunk a medve a kalandjaira," magyarázza meg a CHRIS Wilcock társalapítóját és a Creative igazgatóját Dan Williams-t. "Ennek eléréséhez néhány okos átmenetet használtunk, szerkesztett videókkal, drámai képekkel és a webhely általános nyelvével párosítottuk."

Lásd az akcióban található webhelyet www.beargryls.com . Ebben a cikkben megmagyarázzuk, hogyan lehet újra létrehozni a saját webhelyein. Elindul A bemutató fájlok letöltése .

01. Hozza létre a skálázási hatás létrehozását

A szerkezet, amely lehetővé teszi, hogy az animációs tartalom működéséhez viszonylag egyszerű legyen. A csomagolás mindent megtart, és elrejti a túlcsordulás tartalmát. Ezután lényegében három réteg DIV-címkék vannak a tetején.

 & lt; div osztály = "Wrapper" & gt;
& lt; div osztály = "POS szöveg" & gt; & lt; / div & gt;
& lt; div osztály = "pos mountain1" & gt; & lt; / div & gt;
& lt; div osztály = "pos mountain2" & gt; & lt; / div & gt;
& lt; / div & gt;

02. Indítsa el a CSS-t

A tervezéshez a háttér gradiens képet ad hozzá a testhez, és beállíthatja a képernyő méretét. A burkolat tartja az összes réteget, és a tartalom túlcsordulása el van rejtve, hogy a skálázási hatások alkalmazhatók legyenek.

 test {
Margó: 0;
Padding: 0;
Magasság: 100%;
Háttér: URL (img / bg.jpg)
Központ;
Háttér méret: fedél;
}
.wrapper {
Szélesség: 100VW;
Magasság: 100VH;
Pozíció: relatív;
túlcsordulás: rejtett;
}

03. Helyezze el az egyes réteget

A következő kód biztosítja, hogy minden réteg teljesen helyezze el, az egyik a másik felett, a csomagoláson belül. Ennek mérete kitölti a nézetablak szélességét és magasságait, így a képek kitöltik a képernyőt.

 .POS {
Pozíció: abszolút;
Top: 0;
Bal: 0;
Szélesség: 100VW;
Magasság: 100VH;
}

04. Adja hozzá a szöveget

A szövegosztály igazán csak hozzáadja a megfelelő képet, és beállítja a kezdő pozícióját, mielőtt a helyére animálná a mozgatás az utolsó lépésben hozzáadandó kulcskeretek.

 .Text {
Háttér: URL (IMG / TEXT.PNG)
Központ;
Háttér méret: fedél;
Átalakítás: Fordítás3D (0, 30px, 0);
Opacity: 0;
Animáció: MOVEUP 1.8S Könnyű kimenet;
Animáció-töltési mód: Előre;
}

05. Animálja az első hegyet

Az első hegy a képernyőn távol van, és ez egy kis méretezést kap, amely animált lesz. Az összes réteg átlátszatlansága szintén alacsony, így megjelennek a helyükön.

 .mountain1 {
Háttér: URL (IMG / Mountain1.png)
Központ;
Háttér méret: fedél;
Átalakítás: SCREET3D (1.1, 1.1, 1.1);
Opacity: 0,2;
Animáció: Scaler 1s könnyű-out;
Animáció-töltési mód: Előre;
}

06. Animálja az előtér hegyét

Az előtér hegyi hegye szinte megegyezik a másik hegyekkel - csak sokkal többet jelent a helyére. Mindkét hegy megosztja a "scaler" kulcskeretet az animációhoz.

 .mountain2 {
Háttér: URL (IMG / Mountain2.png)
Központ;
Háttér méret: fedél;
Átalakítás: Scale3D (1.3, 1.3, 1.3);
Opacity: 0,1;
Animáció: Scaler 1.2s könnyű-out;
Animáció-töltési mód: Előre;
}

07. Keyframe animáció hozzáadása

A kulcskerékek most létrehozzák ezt. A mozgás végső állapotában ezt a végállapotot a helyén tartják. A szöveget felfelé mozognak, és a hegyeket csökkentik, hogy illeszkedjenek a tervezésbe.

 @keyFRAME MOVEUP {
100% {
Átalakítás: Fordítás3D (0, 0, 0);
Opacity: 1;
}
}

@keyframes scaler {
100% {
transzformáció: skála3d (1, 1, 1);
Opacity: 1;
}
}

generate CSS — Vegye fel a jegyet, hogy a CSS-t most nagy kedvezményt kapjon (Kép hitel: jövő)

Ezt a cikket eredetileg a 289. \ t Web designer - Eladó most . Iratkozzon fel itt .

Olvass tovább:

Hogyan lehet hozzáadni animációt az SVG-hez CSS-vel
Dos és nem az örömteli webes animációkért
Hogyan tervezzük a CSS formákkal: Bevezetés

Hogyan készítsünk egy rétegelt parallaxhatást a webhelyére

01. Hozza létre a skálázási hatás létrehozását

02. Indítsa el a CSS-t

03. Helyezze el az egyes réteget

04. Adja hozzá a szöveget

05. Animálja az első hegyet

06. Animálja az előtér hegyét

07. Keyframe animáció hozzáadása

kézikönyv - Most Popular Articles

44 a legjobb iPad parancsikonok és gesztusok iPados 2020

Hogyan készítsünk logót a Photoshop-ban

Kromatikus aberrációs hatás létrehozása

10 csodálatos dolog, amit a rétegekkel tehetsz

Hogyan kell az arcot az animációhoz

Add hozzá vibráció az olajfestményeket ezekkel a felső tippekkel

Hogyan kell szobrot a Cinema 4D-ben

Hogyan lehet többet kapni a GIF-től

Kategóriák