Nowoczesny CSS na nowo zdefiniował tworzenie stron internetowych dzięki swoim potężnym funkcjonalnościom i niezwykłym możliwościom. CSS to uniwersalne narzędzie, które oferuje wyjątkowe opcje pozwalające uczynić strony internetowe wysoce interaktywnymi i atrakcyjnymi. Niezależnie od tego, czy chodzi o elastyczność projektowania, szybką personalizację, doskonałe opcje stylizacji, czy zaawansowany interfejs użytkownika (UI) — CSS zapewnia kompleksowe rozwiązania dla wszystkich potrzeb związanych z tworzeniem i stylizacją stron internetowych. Przede wszystkim, używając CSS i HTML, możesz dodawać animacje i efekty, pisząc zaledwie kilka linijek kodu, co w przeciwnym razie byłoby uciążliwe przy użyciu JavaScript.
W tym poradniku przeprowadzimy Cię przez kroki tworzenia efektu przewijania paralaksy za pomocą CSS w Chrome.
Wymagania wstępne
Aby móc śledzić ten samouczek, musisz posiadać podstawową wiedzę na temat HTML i CSS.
Krok 1: Utwórz nowy projekt
Zacznijmy od utworzenia nowego folderu projektu i plików za pomocą interfejsu wiersza poleceń. Otwórz terminal i wpisz następujące polecenie, aby utworzyć nowy folder projektu:
|
1 |
mkdir css-parallax |
Użyj polecenia cd, aby zmienić katalog na folder css-parallax:
|
1 |
cd css-parallax |
Następnie utwórz plik HTML w folderze css-parallax, w którym umieścimy cały kod HTML. Nazwij plik index.html i otwórz go za pomocą polecenia nano:
|
1 |
nano index.html |
Gdy nasz plik index.html będzie gotowy, przejdźmy dalej i nadajmy strukturę stronie internetowej, dodając wstępny kod HTML .
Krok 2: Struktura podstawowego kodu HTML
W tym kroku zaprojektujemy naszą stronę internetową, dodając kod HTML. Dodaj następujące linie kodu w pliku 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>Efekt przewijania paralaksy z CSS</title> </head> <body></body> </html> |
Po skonfigurowaniu podstawowej struktury naszych stron internetowych utwórz trzy klasy sekcji – dwie dla obrazów tła i jedną dla statycznego, gładkiego tła. Następnie dodaj następujące linie kodu w znaczniku <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>Przed efektem przewijania paralaksy</h1> </section> <section class="section static"> <h1>Witamy w przewijaniu paralaksy</h1> </section> <section class="section parallax bg2"> <h1>Po efekcie przewijania paralaksy</h1> </section> </main> ... </body> |
Wstawienie kodu HTML w znaczniku <body> kończy podstawową konfigurację naszego pliku html.file. W kolejnych krokach wprowadzimy CSS i zdefiniujemy opcje stylizacji dla każdego z nich.
Krok 3: Wprowadzenie do CSS
Ostylujmy stronę, dodając plik CSS i tworząc efekt paralaksy. Najpierw utwórz plik CSS w folderze css-parallax folder, w którym umieścimy wszystkie kody CSS wymagane do stworzenia efektu przewijania paralaksy. Po tym wstaw styles.css plik w swoim css-parallax folderze za pomocą nano polecenia:
|
1 |
nano styles.css |
Stylizację naszej strony internetowej rozpoczniemy od klasy .wrapper . Klasa .wrapper określa właściwości perspektywy i przewijania dla całej strony. Zacznij od klasy wrapper i określ jej wysokość, przepełnienie oraz perspektywę. Ustaw wysokość wrappera na stałą wartość, aby efekt przewijania paralaksy mógł zadziałać. W tym poradniku ustawiliśmy wartość okna widoku za pomocą 100vh , aby uzyskać pełną wysokość okna widoku ekranu. Możesz zmodyfikować wartość vh w zależności od potrzeb swojego projektu. Następnie wyłącz poziomy pasek przewijania ekranu, ustawiając właściwość overflow-x jako hidden. Określ również wartość właściwości perspective jako 3px. Dodajmy następujące linie kodu w pliku styles.css :
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Krok 4: Dodaj styl dla klasy .section
Obok klasy wrapper dodaj style do klasy .section . Klasa .section definiuje właściwości rozmiaru, wyświetlania i tekstu dla głównych sekcji. Ustaw pozycję jako relative , aby wyrównać względne pozycjonowanie elementu potomnego .parallax::after i elementu nadrzędnego .section. Zachowaj view-height(vh) jako 100 , aby uzyskać pełną wysokość okna widoku ekranu. Dodaj, zmodyfikuj i ostyluj pozostałe parametry zgodnie ze swoimi potrzebami.
Wewnątrz swojego pliku styles.css dodaj następujący kod obok klasy 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; } |
Następnie dodamy pseudoelement i ostylujemy go, aby stworzyć efekt paralaksy i go uruchomić.
Krok 5: Dodaj style dla klasy .parallax
W tym kroku dodamy pseudoelement do klasy .parallax. Ten pseudoelement będzie ostatnim elementem potomnym i doda pseudoelement ::after do obrazu tła odpowiedzialnego za zainicjowanie efektu paralaksy. W pierwszej połowie kodu skonfigurowano podstawową specyfikację wyświetlania i pozycjonowanie pseudoelementu. W drugiej połowie dodamy właściwość transform za pomocą funkcji CSS translateZ() i ustawimy ją na (-1px). Dodatkowo dodaj z-index , aby kontrolować nakładanie w pionie.
Dodaj następujący kod poniżej klasy .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: Dodaj obrazy i tło dla każdej sekcji
Dodajmy ostatnie właściwości CSS dla obrazów tła i koloru tła sekcji statycznej. Zacznij od dodania jednolitego koloru tła do sekcji .static . Ustaw kolor tła jako aqua i dodaj następujący kod po klasie .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; } ... |
Klasa .static dodaje tło do sekcji statycznej, która nie ma obrazu. Pozostałe dwie sekcje z klasą .parallax mają unikalne klasy przeznaczone do przechowywania obrazów tła. Dodaj adresy URL obrazów tła w klasach .bg1 i .bg2 odpowiednio.
W tym samouczku używamy losowych obrazów z Unsplash. Możesz również użyć obrazów z innych stron internetowych, takich jak Pixapay, Placekitten, i Pexels, by wymienić tylko kilka, i dostosować je według własnych upodobań. Dodaj następujący kod do klasy .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: Połącz CSS z HTML
Teraz, gdy dodaliśmy już cały kod dla efektu przewijania paralaksy, połączmy plik styles.css z plikiem 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>Efekt przewijania paralaksy w CSS</title> </head> ... |
Otwórz plik index.html utworzony w Kroku 2 i w przeglądarce Chrome:
Podsumowanie
W tym samouczku przeszliśmy przez kroki konfiguracji działającej strony internetowej przy użyciu podstawowej struktury. Istnieje wiele innych interesujących opcji i możliwości dostosowywania, z którymi możesz eksperymentować. Możesz spróbować dodać efekty cieni, zmodyfikować przewijanie obrazu i wprowadzić inne poprawki, aby nauka była przyjemna i ekscytująca.
Aby dowiedzieć się więcej na temat tworzenia stron internetowych, zapoznaj się z tymi zasobami z naszego bloga:
- Przewodnik po dodawaniu JavaScript do HTML
- Praca z JavaScript: Czym są obiekty
- Co to jest jQuery i jak można go używać
Miłego kodowania!
Komentarze
Brak komentarzy. Bądź pierwszy.