Úvod
Moderní CSS je mocný nástroj můžete použít k vytvoření mnoha pokročilé Uživatelské Rozhraní (UI) prvky. V minulosti se tyto funkce spoléhaly na knihovny JavaScriptu.
v této příručce nastavíte několik řádků CSS, abyste vytvořili rolovací efekt paralaxy na webové stránce. Jako zástupné obrázky na pozadí použijete obrázky z placekitten.com.
po dokončení tutoriálu budete mít webovou stránku s čistým efektem paralaxy rolování CSS.
varování: Tento článek používá experimentální vlastnosti CSS, které nefungují napříč prohlížeči. Tento projekt byl testován a pracuje na Chromu.
tato technika nefunguje dobře ve Firefoxu, Safari a iOS kvůli některým optimalizacím těchto prohlížečů.
Krok 1-Vytvoření nového projektu
v tomto kroku pomocí příkazového řádku nastavte novou složku projektu a soubory. Chcete-li začít, otevřete terminál a vytvořte novou složku projektu.
zadejte následující příkaz pro vytvoření složky projektu:
- mkdir css-parallax
v tomto případě jste volali složku css-parallax. Nyní, změnit na css-parallax složka:
- cd css-parallax
Next, vytvořit index.html soubor css-parallax složka nano příkaz:
- nano index.html
Budete dát všechny HTML pro projekt v tomto souboru.
v dalším kroku začnete vytvářet strukturu webové stránky.
2. Krok — Nastavení Struktury Aplikace
V tomto kroku přidáte HTML potřebné k vytvoření struktury projektu.
do souboru index.html přidejte následující Kód:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Scrolling Parallax</title> </head> <body></body></html>Toto je základní struktura většiny stránek, které používají HTML.
přidejte do značky <body> následující Kód:
<body>... <main> <section class="section parallax bg1"> <h1>Cute Kitten</h1> </section> <section class="section static"> <h1>Boring</h1> </section> <section class="section parallax bg2"> <h1>Fluffy Kitten</h1> </section> </main>...</body>tento kód vytváří tři různé sekce. Dva budou mít obrázek na pozadí a jeden bude statické, prosté pozadí.
v několika dalších krocích přidáte styly pro každou sekci pomocí tříd, které jste přidali do HTML.
Krok 3-Vytvoření souboru CSS a přidání počátečního CSS
v tomto kroku vytvoříte soubor CSS. Poté přidáte počáteční CSS potřebné ke stylu webu a vytvoření efektu paralaxy.
nejprve vytvořte soubor styles.css ve složce css-parallax pomocí příkazu nano :
- nano styles.css
zde vložíte všechny CSS potřebné k vytvoření efektu posouvání paralaxy.
dále začněte třídou .wrapper. Do souboru styles.css přidejte následující Kód:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}třída .wrapper nastavuje vlastnosti perspektivy a posouvání pro celou stránku.
výška obalu musí být nastavena na pevnou hodnotu, aby efekt fungoval. Můžete použít výřez jednotky vh100 získat plnou výšku obrazovky, je výřez.
při změně měřítka obrázků přidají na obrazovku vodorovný posuvník, takže jej můžete zakázat přidáním overflow-x: hidden;perspective nemovitosti simuluje vzdálenost od výřezu k pseudo-prvky, které budou vytvářet a transformovat dále v CSS.
v dalším kroku přidáte další CSS pro styl vaší webové stránky.
Krok 4-Přidání stylů pro .třída sekce
v tomto kroku přidáte styly do třídy .section.
uvnitř souboru styles.css přidejte pod třídu wrapper následující Kód:
.wrapper { height: 100vh; overflow-x: hidden; perspective: 2px;}.section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;} třída .section definuje vlastnosti velikosti, zobrazení a textu pro hlavní sekce.
Nastavte pozici relative tak, že dítě, .parallax::after může být umístěn absolutně vzhledem k nadřazenému prvku .section.
každá sekce má view-height(vh) z 100, aby zabírala celou výšku výřezu. Tuto hodnotu lze změnit a nastavit na libovolnou výšku, kterou preferujete pro každou sekci.
konečně, zbytek CSS vlastnosti se používají k formátování a přidání stylu do textu uvnitř každé sekce. Umístí text do středu každé sekce a přidá barvu white.
dále si budete přidat pseudo-prvek a styl vytvořit efekt paralaxy na dva oddíly HTML.
Krok 5-Přidání stylů pro .paralaxa Class
v tomto kroku přidáte styly do třídy .parallax.
nejprve přidáte pseudo-prvek do třídy .parallax, která má být stylizována.
Poznámka: můžete navštívit MDN web docs, kde se dozvíte více o pseudo-prvcích CSS.
přidejte následující kód pod .section třída:
....section { position: relative; height: 100vh; 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; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}....parallax class přidává ::after pseudo-prvek obrázek na pozadí a poskytuje transformuje potřebné pro paralaxy efekt.
pseudo-element je poslední dítě prvku s třídou .parallax.
První polovina kódu zobrazuje a umisťuje prvek psuedo. transform nemovitosti se pohybuje pseudo-element, zpátky, pryč z kamery na z-index, pak váhy zpět, vyplňte výřezu.
protože je pseudo-element dále, zdá se, že se pohybuje pomaleji.
v dalším kroku přidáte obrázky na pozadí a statický styl pozadí.
6. Krok — Přidání Obrázků a Pozadí Pro Každou Část
V tomto kroku přidáte konečné CSS vlastnosti přidat obrázky na pozadí a barvu pozadí statické části.
za Prvé, přidat barvu pozadí v .static oddíl s následující kód po .parallax::after třídy:
....parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}.static { background: red;}...třída .static přidá pozadí statické části, která nemá obrázek.
dvě sekce s třídou .parallax mají také třídu navíc, která je pro každou jinou. Pro přidání obrázků na pozadí kotě použijte třídy .bg1 a .bg2 .
přidejte do třídy .static následující Kód:
....static { background: red;}.bg1::after { background-image: url('https://placekitten.com/g/900/700');}.bg2::after { background-image: url('https://placekitten.com/g/800/600');}....bg1, .bg2 třídy přidat příslušné obrázky na pozadí pro každou sekci.
obrázky jsou z webu placekitten. Jedná se o službu pro získávání obrázků koťat pro použití jako zástupné symboly.
Nyní, že všechny kód pro parallax posouvání efekt je přidán, můžete odkaz na styles.css soubor index.html.
Krok 7-propojení stylů.css a otevírací index.html v Prohlížeči
V tomto kroku, budete odkaz styles.css soubor a otevřete projekt v prohlížeči vidět parallax posouvání efekt.
nejprve přidejte následující kód do značky <head> v souboru index.html:
...<head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Parallax</title></head>...Teď, můžete otevřít index.html soubor v prohlížeči:
S tím, co jste nastavili fungující webové stránky s rolování efekt. Podívejte se na toto úložiště GitHub a podívejte se na celý kód.
Závěr
V tomto článku, můžete nastavit projekt s index.htmlstyles.css soubor a nyní máte funkční webové stránky. Přidali jste do struktury své webové stránky a vytvořili styly pro různé sekce na webu.
je možné umístit obrázky, které používáte, nebo efekt paralaxy dále, aby se pohybovaly pomaleji. Budete muset změnit množství pixelů naperspective atransform vlastnosti. Pokud nechcete obrázek na pozadí, přejděte na všechny, použijte background-attachment: fixed; místo perspective/translate/scale.