wprowadzenie
Nowoczesny CSS to potężne narzędzie, którego możesz użyć do tworzenia wielu zaawansowanych funkcji interfejsu użytkownika (UI). W przeszłości funkcje te opierały się na bibliotekach JavaScript.
w tym przewodniku skonfigurujesz kilka linii CSS, aby stworzyć przewijający efekt paralaksy na stronie internetowej. Użyjesz obrazów z placekitten.com jako obrazów tła zastępczego.
Po ukończeniu kursu będziesz mieć stronę internetową z czystym efektem paralaksy przewijania CSS.
Ostrzeżenie: Ten artykuł wykorzystuje eksperymentalne właściwości CSS, które nie działają w przeglądarkach. Ten projekt został przetestowany i działa na Chrome.
ta technika nie działa dobrze w Firefoksie, Safari i iOS z powodu niektórych optymalizacji tych przeglądarek.
Krok 1 — Tworzenie nowego projektu
w tym kroku użyj wiersza poleceń, aby skonfigurować nowy folder i pliki projektu. Aby rozpocząć, otwórz terminal i utwórz nowy folder projektu.
wpisz następujące polecenie, aby utworzyć folder projektu:
- mkdir css-parallax
w tym przypadku wywołałeś foldercss-parallax. Teraz przejdź do folderucss-parallax:
- cd css-parallax
następnie utwórz plikindex.html w folderzecss-parallax z folderemnano polecenie:
- nano index.html
w tym pliku umieścisz cały kod HTML dla projektu.
w następnym kroku rozpoczniesz tworzenie struktury strony internetowej.
Krok 2 — konfigurowanie struktury aplikacji
w tym kroku dodasz kod HTML potrzebny do utworzenia struktury projektu.
wewnątrz plikuindex.html Dodaj następujący kod:
<!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>jest to podstawowa struktura większości stron internetowych, które używająHTML.
Dodaj następujący kod wewnątrz znacznika<body>:
<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>ten kod tworzy trzy różne sekcje. Dwa będą miały obraz tła, a jeden będzie statycznym, prostym tłem.
w kolejnych krokach dodasz style dla każdej sekcji, używając klas dodanych wHTML.
Krok 3 — Tworzenie pliku CSS i dodawanie początkowego CSS
w tym kroku utworzysz plikCSS. Następnie dodasz początkowy CSS potrzebny do stylizacji strony i stworzenia efektu paralaksy.
najpierw Utwórz plikstyles.css w folderzecss-parallax za pomocą polecenianano :
- nano styles.css
tutaj umieścisz wszystkie CSS potrzebne do stworzenia efektu przewijania paralaksy.
następnie zacznij od klasy .wrapper. Wewnątrz pliku styles.css Dodaj następujący kod:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}Klasa.wrapper ustawia właściwości perspektywy i przewijania dla całej strony.
wysokość owijarki musi być ustawiona na stałą wartość, aby efekt działał. Możesz użyć jednostki viewport vh ustawionej na 100, aby uzyskać pełną wysokość viewportu ekranu.
gdy przeskalujesz obrazy, dodadzą one poziomy pasek przewijania do ekranu, dzięki czemu możesz go wyłączyć, dodającoverflow-x: hidden;. Właściwośćperspective symuluje odległość od widoku do pseudoelementów, które utworzysz i przekształcisz dalej wCSS.
w następnym kroku dodasz więcej CSS do stylizacji swojej strony.
Krok 4-Dodawanie stylów do .sekcja Klasa
w tym kroku dodasz style do klasy .section.
wewnątrz plikustyles.css Dodaj następujący kod poniżej klasy opakowującej:
.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;}Klasa.section definiuje rozmiar, wyświetlanie i właściwości tekstu dla głównych sekcji.
Ustaw pozycjęrelative tak, aby dziecko,.parallax::after mogło być ustawione absolutnie względem elementu nadrzędnego.section.
każda sekcja ma view-height(vh) z 100, aby zająć pełną wysokość widoku. Wartość tę można zmienić i ustawić na dowolną wysokość dla każdej sekcji.
wreszcie, pozostałe właściwościCSS są używane do formatowania i dodawania stylizacji do tekstu wewnątrz każdej sekcji. Ustawia tekst na środku każdej sekcji i dodaje kolor white.
następnie dodasz pseudo-element i stylizujesz go, aby stworzyć efekt paralaksy na dwóch sekcjach w HTML.
Krok 5-Dodawanie stylów do .Klasa paralaksy
w tym kroku dodasz style do klasy .parallax.
najpierw dodasz pseudo-element do klasy .parallax, która ma być stylizowana.
Uwaga: możesz odwiedzić dokumenty MDN, aby dowiedzieć się więcej o pseudo-elementach CSS.
dodaj poniższy kod pod klasą.section:
....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;}...Klasa.parallax dodaje pseudoelement ::after do obrazu tła i zapewnia transformacje potrzebne do efektu paralaksy.
pseudo-element jest ostatnim potomkiem elementu z klasą .parallax.
pierwsza połowa kodu wyświetla i pozycjonuje element psuedo. Właściwośćtransform przenosi pseudoelement z powrotem z kamery naz-index, a następnie skaluje go z powrotem, aby wypełnić widok.
ponieważ pseudo-element jest dalej, wydaje się poruszać wolniej.
w następnym kroku dodasz obrazy tła i statyczny styl tła.
Krok 6 — Dodawanie obrazów i tła dla każdej sekcji
w tym kroku dodasz ostateczne właściwościCSS, aby dodać obrazy tła i kolor tła sekcji statycznej.
najpierw dodaj jednolity kolor tła do sekcji.static z następującym kodem po klasie.parallax::after:
....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;}...Klasa.static dodaje tło do sekcji statycznej, która nie ma obrazu.
dwie sekcje z .parallax mają również dodatkową klasę, która jest inna dla każdej z nich. Użyj klas.bg1 I.bg2, aby dodać obrazy tła Kotka.
Dodaj następujący kod do klasy.static:
....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');}...klasy .bg1, .bg2 dodają odpowiednie obrazy tła dla każdej sekcji.
zdjęcia pochodzą ze strony placekitten. Jest to usługa do robienia zdjęć kociąt do wykorzystania jako placeholders.
Po dodaniu całego kodu dla efektu przewijania paralaksy możesz połączyć się z plikiemstyles.css w plikuindex.html.
Krok 7-łączenie stylów.css i indeks otwarcia.html w przeglądarce
w tym kroku połączysz swój plik styles.css I otworzysz projekt w przeglądarce, aby zobaczyć efekt przewijania paralaksy.
najpierw dodaj następujący kod do znacznika<head> w plikuindex.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>...teraz możesz otworzyć swój plikindex.html w swojej przeglądarce:
dzięki temu skonfigurowałeś działającą stronę internetową z efektem przewijania. Sprawdź to repozytorium GitHub, aby zobaczyć pełny kod.
wnioski
w tym artykule, skonfigurujesz projekt zindex.html Istyles.css I masz teraz funkcjonalną stronę internetową. Dodałeś w strukturze swojej strony internetowej i utworzyłeś style dla różnych sekcji na stronie.
można umieścić obrazy, których używasz, lub efekt paralaksy dalej, aby poruszały się wolniej. Musisz zmienić ilość pikseli we właściwościachperspective Itransform. Jeśli w ogóle nie chcesz przewijać obrazu tła, użyj background-attachment: fixed; zamiast perspective/translate/scale.