A modern CSS újradefiniálta a webfejlesztést erőteljes funkcióival és rendkívüli képességeivel. CSS egy univerzális eszköz, amely kiemelkedő lehetőségeket kínál a weboldalak rendkívül interaktívvá és vonzóvá tételére. Legyen szó a tervezés rugalmasságáról, a gyors testreszabásról, a kiváló stílusbeállításokról vagy a fejlett felhasználói felületről (UI) — a CSS végpontok közötti megoldásokat kínál minden webfejlesztési és stílusigényre. Mindenekelőtt a CSS és a HTML használatával mindössze néhány sornyi kód megírásával adhat hozzá animációkat és effektusokat, ami egyébként megerőltető lenne JavaScript használatával.
Ebben az útmutatóban végigvezetjük a parallax görgetési effektus CSS-sel történő létrehozásának lépésein Chrome-ban.
Előfeltételek
Az útmutató követéséhez alapszintű HTML és CSS ismeretekkel kell rendelkeznie.
1. lépés: Új projekt létrehozása
Kezdjük egy új projektmappa és fájlok létrehozásával a parancssori felület segítségével. Nyissa meg a terminált, és írja be a következő parancsot egy új projektmappa létrehozásához:
|
1 |
mkdir css-parallax |
Használja a cd parancsot a könyvtár módosításához a css-parallax mappára:
|
1 |
cd css-parallax |
Ezután hozzon létre egy HTML fájlt a css-parallax mappában, ahová az összes HTML kódot helyezzük. Nevezze el a fájlt index.html névre, és nyissa meg a nano parancs használatával:
|
1 |
nano index.html |
Miután az index.html fájlunk elkészült, lépjünk tovább, és strukturáljuk a weboldalt a bevezető HTML kódok hozzáadásával.
2. lépés: Az alapvető HTML struktúrája
Ebben a lépésben megtervezzük a weboldalunkat a HTML kódok hozzáadásával. Adja hozzá a következő kódsorokat az index.html fájlhoz:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax görgetési effektus with CSS-szel</title> </head> <body></body> </html> |
A weboldalaink alapvető struktúrájának beállítása után hozzon létre három section osztályt – kettőt a háttérképekhez, egyet pedig a statikus, egyszerű háttérhez. Ezután adja hozzá a következő kódsorokat a <body> címkébe:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Before Parallax görgetési effektus előtt</h1> </section> <section class="section static"> <h1>Üdvözöljük a parallax görgetésben</h1> </section> <section class="section parallax bg2"> <h1>After Parallax görgetési effektus után</h1> </section> </main> ... </body> |
A HTML kódok beillesztése a <body> tagbe befejezi az html.fájlunk alapvető beállítását. A következő lépésekben bevezetjük a CSS-t, és meghatározzuk a stílusbeállításokat mindegyikhez.
3. lépés: Bevezetés a CSS-be
Formázzuk a weboldalt a CSS fájl hozzáadásával és a parallax effektus létrehozásával. Először hozzon létre egy CSS fájlt a css-parallax mappa, ahová a parallax görgetési effektus létrehozásához szükséges összes CSS-kódot helyezzük. Ezután szúrjon be egy styles.css fájlt a css-parallax mappájában a nano paranccsal:
|
1 |
nano styles.css |
A weboldalunk stílusát a .wrapper osztállyal kezdjük. A .wrapper osztály beállítja a perspektívát és a görgetési tulajdonságokat a teljes oldalra. Kezdje a wrapper osztállyal, és adja meg a magasságát, túlcsordulását és perspektíváját. Állítsa a wrapper magasságát egy állandó értékre, hogy a parallax görgetési effektus működjön. Ebben az útmutatóban a viewport értékét a 100vh használatával állítottuk be, hogy a képernyő nézetének teljes magasságát megkapjuk. Módosíthatja a vh értéket a projekt igényei alapján. Ezután tiltsa le a képernyő vízszintes görgetősávját a overflow-x tulajdonság hidden értékre állításával. Emellett adja meg a perspective tulajdonság értékeként a 3px értéket. Adjunk hozzá a következő kódsorokat a styles.css fájl osztályba:
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
4. lépés: Stílus hozzáadása a .section osztályhoz
A wrapper osztály után adjon stílusokat a .section osztályhoz. A .section osztály határozza meg a fő szekciók méretét, megjelenítését és szöveges tulajdonságait. Állítsa a pozíciót relative értékre, hogy igazítsa a .parallax::after gyermekelem és a .section szülőelem relatív pozicionálását. Tartsa a view-height(vh) értéket 100 értéken, hogy a képernyő nézetének teljes magasságát megkapja. Adja hozzá, módosítsa és formázza a többi paramétert az igényeinek megfelelően.
A styles.css fájlban adja hozzá a következő kódot a wrapper osztály után:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
Ezután hozzáadunk egy álelemet (pseudo-element), és megformázzuk azt a parallax hatás létrehozásához és működésbe hozásához.
5. lépés: Stílusok hozzáadása a .parallax osztályhoz
Ebben a lépésben egy álelemet adunk hozzá a .parallax osztályhoz. Ez az álelem az elem utolsó gyermeke lesz, és egy ::after álelemet ad a háttérképhez, amely a parallax hatás elindításáért felelős. A kód első felében az álelem alapvető megjelenítési specifikációja és pozicionálása van beállítva. A következő felében hozzáadjuk a transform tulajdonságot a translateZ() CSS függvénnyel, és megtartjuk (-1px) értéken. Emellett adjon hozzá egy z-index értéket a függőleges egymásra helyezés szabályozásához.
Adja hozzá a következő kódot a .section osztály alá:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000; } .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
6. lépés: Képek és háttér hozzáadása az egyes szekciókhoz
Adjuk hozzá az utolsó CSS tulajdonságokat a statikus szekció háttérképeihez és háttérszínéhez. Kezdje egy egyszínű háttérszín hozzáadásával a .static szekcióhoz. Állítsa a háttérszínt aqua értékre, és adja hozzá a következő kódot a .parallax::after osztály után:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
A .static osztály hátteret ad annak a statikus szekciónak, amely nem rendelkezik képpel. A másik két szekció, amely a .parallax osztállyal rendelkezik, egyedi osztályokat kapott a háttérképek tárolására. Add hozzá a háttérképek URL-címeit a .bg1 és .bg2 osztályokhoz.
Ebben az útmutatóban véletlenszerű képeket használunk az Unsplash webhelyről. Más webhelyekről is használhatsz képeket, mint például a Pixapay, Placekitten, és Pexels, hogy csak néhányat említsünk, és testre szabhatod őket kedved szerint. Add hozzá a következő kódot a .static osztályhoz:
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
7. lépés: A CSS összekapcsolása a HTML-lel
Most, hogy hozzáadtuk az összes kódot a parallax görgetési effektushoz, kapcsoljuk össze a styles.css fájlt az index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax Scrolling Effect with CSS</title> </head> ... |
Nyisd meg a index.html fájlt, amelyet a 2. lépésben hoztunk létre, a Chrome böngészőben:
Összegzés
Ebben az útmutatóban végigvettük egy működő weboldal beállításának lépéseit egy alapvető elrendezés használatával. Rengeteg más érdekes lehetőség és testreszabási opció létezik, amellyel kísérletezhetsz. Megpróbálhatsz árnyékhatásokat hozzáadni, módosítani a képek görgetését és egyéb beállításokat végezni, hogy a tanulás szórakoztató és izgalmas legyen.
Ha szeretnél mélyebben elmerülni a webfejlesztési témákban, tekintsd meg ezeket a forrásokat a blogunkról:
- Útmutató a JavaScript HTML-hez való hozzáadásához
- JavaScript használata: Mik azok az objektumok
- Mi az a jQuery és hogyan használhatod
Kellemes kódolást!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.