Moderné CSS predefinovalo vývoj webu vďaka svojim výkonným funkciám a mimoriadnym schopnostiam. CSS je univerzálny nástroj, ktorý ponúka vynikajúce možnosti na vytvorenie vysoko interaktívnych a pútavých webových stránok. Či už ide o flexibilitu v dizajne, rýchle prispôsobenie, vynikajúce možnosti štýlovania alebo pokročilé používateľské rozhranie (UI) — CSS prináša komplexné riešenia pre všetky potreby vývoja a štýlovania webu. Predovšetkým, pomocou CSS a HTML, môžete pridať animácie a efekty napísaním len niekoľkých riadkov kódu, čo je inak pri použití JavaScriptu namáhavé.
V tomto návode vás prevedieme krokmi vytvorenia efektu paralaxného posúvania pomocou CSS v prehliadači Chrome.
Požiadavky
Na sledovanie tohto návodu musíte mať základné znalosti HTML a CSS.
Krok 1: Vytvorenie nového projektu
Začnime vytvorením nového priečinka projektu a súborov pomocou rozhrania príkazového riadka. Otvorte terminál a zadajte nasledujúci príkaz na vytvorenie nového priečinka projektu:
|
1 |
mkdir css-parallax |
Použite príkaz cd na zmenu adresára na priečinok css-parallax :
|
1 |
cd css-parallax |
Ďalej vytvorte HTML súbor v priečinku css-parallax, kde umiestnime všetky HTML kódy. Pomenujte súbor index.html a otvorte ho pomocou príkazu nano :
|
1 |
nano index.html |
Keď máme náš súbor index.html pripravený, poďme ďalej a vytvorme štruktúru webovej stránky pridaním úvodných HTML kódov.
Krok 2: Štruktúra základného HTML
V tomto kroku navrhneme našu webovú stránku pridaním HTML kódov. Pridajte nasledujúce riadky kódu do súboru index.html file:
|
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>Paralaxný posúvací efekt s CSS</title> </head> <body></body> </html> |
Po nastavení základnej štruktúry našich webových stránok vytvorte tri triedy sekcií – dve pre obrázky na pozadí a jednu pre statické čisté pozadie. Ďalej pridajte nasledujúce riadky kódu do značky <body> :
|
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>Pred efektom paralaxného posúvania</h1> </section> <section class="section static"> <h1>Vitajte v paralaxnom posúvaní</h1> </section> <section class="section parallax bg2"> <h1>Po efekte paralaxného posúvania</h1> </section> </main> ... </body> |
Vložením HTML kódov do značky <body> sa dokončí základné nastavenie nášho html.súboru. V nasledujúcich krokoch si predstavíme CSS a definujeme možnosti štýlovania pre každý z nich.
Krok 3: Úvod do CSS
Poďme nastylovať webovú stránku pridaním CSS súboru a vytvorením paralaxného efektu. Najprv vytvorte CSS súbor v priečinku css-parallax priečinok, do ktorého vložíme všetky CSS kódy potrebné na vytvorenie efektu paralaxného posúvania. Potom vložte styles.css súbor vo vašom css-parallax priečinku pomocou nano príkazu:
|
1 |
nano styles.css |
Našu webovú stránku začneme štylovať od .wrapper triedy. Trieda .wrapper trieda nastavuje perspektívu a vlastnosti posúvania pre celú stránku. Začnite s triedou wrapper a špecifikujte jej výšku (height), pretečenie (overflow) a perspektívu (perspective). Nastavte výšku wrapperu na konštantnú hodnotu, aby efekt paralaxného posúvania fungoval. V tomto návode sme nastavili hodnotu viewportu pomocou 100vh na získanie plnej výšky viewportu obrazovky. Môžete upraviť vh hodnotu na základe potrieb vášho projektu. Ďalej zakážte horizontálny posúvač obrazovky nastavením vlastnosti overflow-x na hidden. Taktiež špecifikujte hodnotu vlastnosti perspective na 3px. Pridajme nasledujúce riadky kódu do súboru styles.css :
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Krok 4: Pridanie štýlu pre triedu .section
Vedľa triedy wrapper pridajte štýly pre .section triedu. Trieda .section definuje veľkosť, zobrazenie a vlastnosti textu pre hlavné sekcie. Nastavte pozíciu (position) na relative na zarovnanie relatívneho umiestnenia dcérskeho prvku .parallax::after a materského prvku .section. Ponechajte view-height(vh) ako 100 na získanie plnej výšky viewportu obrazovky. Pridajte, upravte a naštýlujte ostatné parametre podľa vašich potrieb.
Vo vnútri vášho styles.css súboru pridajte nasledujúci kód vedľa triedy wrapper:
|
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; } |
Ďalej pridáme pseudo-element a naštýlujeme ho, aby sme vytvorili paralaxný efekt a uviedli ho do praxe.
Krok 5: Pridanie štýlov pre triedu .parallax
V tomto kroku pridáme pseudo-element na .parallax. Tento pseudo-element bude posledným potomkom elementu a pridá pseudo-element ::after k obrázku na pozadí, ktorý je zodpovedný za spustenie paralaxného efektu. V prvej polovici kódu je nastavená základná špecifikácia zobrazenia a poziciovanie pseudo-elementu. V druhej polovici pridáme vlastnosť transform pomocou CSS funkcie translateZ() a ponecháme ju ako (-1px). Okrem toho pridajte z-index na ovládanie vertikálneho vrstvenia.
Pridajte nasledujúci kód pod triedu .section class:
|
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; } ... |
Krok 6: Pridanie obrázkov a pozadia pre každú sekciu
Pridajme finálne vlastnosti CSS pre obrázky na pozadí a farbu pozadia statickej sekcie. Začnite pridaním plnej farby pozadia do .static sekcie. Nastavte farbu pozadia na aqua a pridajte nasledujúci kód za triedu .parallax::after class:
|
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; } ... |
Trieda .static pridáva pozadie do statickej sekcie, ktorá nemá obrázok. Ostatné dve sekcie s .parallax triedou majú jedinečné triedy určené na uloženie obrázkov na pozadí. Pridajte adresy URL obrázkov na pozadí do .bg1 a .bg2 tried.
V tomto návode používame náhodné obrázky z Unsplash. Môžete tiež použiť obrázky z iných webových stránok ako Pixapay, Placekitten, a Pexels, aby sme spomenuli aspoň niektoré, a prispôsobiť si ich podľa vlastných predstáv. Pridajte nasledujúci kód do triedy .static :
|
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'); ... |
Krok 7: Prepojenie CSS s HTML
Teraz, keď sme pridali všetok kód pre efekt paralaxného rolovania, prepojme súbor styles.css so súborom 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>Paralaxný efekt rolovania s CSS</title> </head> ... |
Otvorte index.html, ktorý sme vytvorili v Kroku 2 v prehliadači Chrome:
Záver
V tomto návode sme si prešli krokmi nastavenia fungujúcej webovej stránky pomocou základného nastavenia. Existuje množstvo ďalších zaujímavých možností a možností prispôsobenia, s ktorými môžete experimentovať. Môžete skúsiť pridať efekty tieňov, upraviť rolovanie obrázkov a ďalšie úpravy, aby bolo vaše učenie zábavné a vzrušujúce.
Ak sa chcete hlbšie ponoriť do tém vývoja webu, pozrite si tieto zdroje z nášho blogu:
- Sprievodca pridaním JavaScriptu do HTML
- Práca s JavaScriptom: Čo sú to objekty
- Čo je jQuery a ako ho môžete použiť
Príjemné programovanie!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.