Moderní CSS redefinovalo vývoj webu díky svým výkonným funkcím a mimořádným schopnostem. CSS je univerzální nástroj, který nabízí vynikající možnosti, jak učinit webové stránky vysoce interaktivními a lákavými. Ať už jde o flexibilitu v designu, rychlé přizpůsobení, vynikající možnosti stylování nebo pokročilé uživatelské rozhraní (UI) — CSS přináší komplexní řešení pro všechny potřeby vývoje a stylování webu. A co je nejdůležitější, pomocí CSS a HTML, můžete přidat animace a efekty napsáním pouhých několika řádků kódu, což je jinak s použitím JavaScriptu namáhavé.
V tomto návodu vás provedeme kroky vytvoření efektu paralaxního rolování pomocí CSS v prohlížeči Chrome.
Požadavky
Abyste mohli sledovat tento návod, musíte mít základní znalosti HTML a CSS.
Krok 1: Vytvoření nového projektu
Začněme vytvořením nové složky projektu a souborů pomocí rozhraní příkazového řádku. Otevřete terminál a zadejte následující příkaz pro vytvoření nové složky projektu:
|
1 |
mkdir css-parallax |
Použijte příkaz cd pro změnu adresáře na složku css-parallax :
|
1 |
cd css-parallax |
Dále vytvořte HTML soubor ve složce css-parallax , kam vložíme všechny HTML kódy. Pojmenujte soubor index.html a otevřete jej pomocí příkazu nano :
|
1 |
nano index.html |
Jakmile máme náš soubor index.html připravený, pojďme se posunout dál a strukturovat webovou stránku přidáním úvodních HTML kódů.
Krok 2: Struktura základního HTML
V tomto kroku navrhneme naši webovou stránku přidáním HTML kódů. Přidejte následující řádky kódu do souboru index.html :
|
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í rolovací efekt pomocí CSS</title> </head> <body></body> </html> |
Po nastavení základní struktury našich webových stránek vytvořte tři třídy sekcí – dvě pro obrázky na pozadí a jednu pro statické čisté pozadí. Dále přidejte následující řádky 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>Před efektem paralaxního rolování</h1> </section> <section class="section static"> <h1>Vítejte v paralaxním rolování</h1> </section> <section class="section parallax bg2"> <h1>Po efektu paralaxního rolování</h1> </section> </main> ... </body> |
Vložením HTML kódů do značky <body> se dokončí základní nastavení našeho html. souboru. V následujících krocích představíme CSS a definujeme možnosti stylování pro každý z nich.
Krok 3: Úvod do CSS
Pojďme ostylovat webovou stránku přidáním CSS souboru a vytvořením paralaxního efektu. Nejprve vytvořte CSS soubor ve složce css-parallax složku, kam umístíme všechny CSS kódy potřebné k vytvoření efektu parallax scrolling. Poté vložte styles.css soubor ve vaší složce css-parallax pomocí příkazu nano :
|
1 |
nano styles.css |
Naši webovou stránku začneme stylovat třídou .wrapper . Třída .wrapper nastavuje vlastnosti perspektivy a rolování pro celou stránku. Začněte třídou wrapper a definujte její výšku, přetečení a perspektivu. Nastavte výšku wrapperu na konstantní hodnotu, aby efekt parallax scrolling fungoval. V tomto návodu jsme nastavili hodnotu viewportu pomocí 100vh pro získání plné výšky viewportu obrazovky. Můžete upravit hodnotu vh podle potřeb vašeho projektu. Dále zakažte horizontální posuvník obrazovky nastavením vlastnosti overflow-x na hidden. Také specifikujte hodnotu vlastnosti perspective jako 3px. Přidejme následující řádky kódu do souboru styles.css :
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Krok 4: Přidání stylu pro třídu .section
Vedle třídy wrapper přidejte styly pro třídu .section . Třída .section definuje velikost, zobrazení a vlastnosti textu pro hlavní sekce. Nastavte pozici jako relative pro zarovnání relativního pozicování dceřiného prvku .parallax::after a rodičovského prvku .section. Ponechte view-height(vh) jako 100 pro získání plné výšky viewportu obrazovky. Přidejte, upravte a nastylujte ostatní parametry podle svých potřeb.
Uvnitř vašeho souboru styles.css přidejte následující kód vedle třídy 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; } |
Dále přidáme pseudo-element a nastylujeme ho, abychom vytvořili efekt parallax a uvedli ho do praxe.
Krok 5: Přidání stylů pro třídu .parallax
V tomto kroku přidáme pseudo-element na .parallax. Tento pseudo-element bude posledním potomkem elementu a přidá pseudo-element ::after k obrázku na pozadí, který je zodpovědný za spuštění efektu parallax. V první polovině kódu je nastaveno základní zobrazení a pozicování pseudo-elementu. V druhé polovině přidáme vlastnost transform pomocí CSS funkce translateZ() a ponecháme ji jako (-1px). Navíc přidejte z-index pro kontrolu vertikálního vrstvení.
Přidejte následující kód pod třídu .section :
|
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: Přidání obrázků a pozadí pro každou sekci
Přidejme finální vlastnosti CSS pro obrázky na pozadí a barvu pozadí statické sekce. Začněte přidáním plné barvy pozadí do sekce .static . Nastavte barvu pozadí jako aqua a přidejte následující kód za třídu .parallax::after :
|
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; } ... |
Třída .static přidává pozadí do statické sekce, která nemá obrázek. Další dvě sekce s třídou .parallax mají jedinečné třídy určené pro uložení obrázků na pozadí. Přidejte adresy URL obrázků na pozadí do tříd .bg1 a .bg2 v tomto pořadí.
V tomto návodu používáme náhodné obrázky z Unsplash. Můžete také použít obrázky z jiných webů, jako je Pixapay, Placekitten, a Pexels, abychom jmenovali alespoň některé, a přizpůsobit si je podle libosti. Přidejte následující kód do .static třídy:
|
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: Propojení CSS s HTML
Nyní, když jsme přidali veškerý kód pro efekt paralaxního rolování, propojme soubor styles.css se souborem 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í rolovací efekt s CSS</title> </head> ... |
Otevřete soubor index.html, který jsme vytvořili v Kroku 2, v prohlížeči Chrome:
Závěr
V tomto návodu jsme si prošli kroky nastavení funkční webové stránky pomocí základního nastavení. Existuje spousta dalších zajímavých možností a úprav, se kterými můžete experimentovat. Můžete zkusit přidat efekty stínů, upravit rolování obrázků a další úpravy, aby pro vás bylo učení zábavné a vzrušující.
Chcete-li se hlouběji ponořit do témat vývoje webu, podívejte se na tyto zdroje z našeho blogu:
- Průvodce přidáním JavaScriptu do HTML
- Práce s JavaScriptem: Co jsou objekty
- Co je jQuery a jak ho můžete použít
Přejeme příjemné programování!
Komentáře
Zatím žádné komentáře. Buďte první.