Moderni CSS redefinirao je web razvoj sa svojim moćnim funkcionalnostima i izvanrednim mogućnostima. CSS je svestran alat koji nudi izvanredne opcije za stvaranje vrlo interaktivnih i privlačnih web stranica. Bilo da se radi o fleksibilnosti u dizajnu, brzoj prilagodbi, izvrsnim opcijama oblikovanja ili naprednom korisničkom sučelju (UI) — CSS donosi cjelovita rješenja za sve potrebe web razvoja i oblikovanja. Iznad svega, korištenjem CSS-a i HTML, možete dodati animacije i efekte pisanjem samo nekoliko redaka koda, što je inače naporno koristeći JavaScript.
U ovom vodiču, provest ćemo vas kroz korake stvaranja efekta paralaksnog pomicanja pomoću CSS-a u Chromeu.
Preduvjeti
Kako biste pratili ovaj vodič, morate imati osnovno razumijevanje HTML-a i CSS-a.
Korak 1: Stvorite novi projekt
Započnimo sa stvaranjem nove mape projekta i datoteka pomoću sučelja naredbenog retka. Otvorite svoj terminal i upišite sljedeću naredbu kako biste stvorili novu mapu projekta:
|
1 |
mkdir css-parallax |
Upotrijebite naredbu cd kako biste promijenili direktorij u mapu css-parallax :
|
1 |
cd css-parallax |
Zatim stvorite HTML datoteku u mapi css-parallax u koju ćemo staviti sve HTML kodove. Nazovite datoteku index.html i otvorite je pomoću naredbe nano :
|
1 |
nano index.html |
Nakon što pripremimo našu datoteku index.html, krenimo dalje i strukturirajmo web stranicu dodavanjem uvodnih HTML kodova.
Korak 2: Struktura osnovnog HTML-a
U ovom koraku dizajnirat ćemo našu web stranicu dodavanjem HTML kodova. Dodajte sljedeće retke koda u datoteku 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 paralaksnog pomicanja s CSS-om</title> </head> <body></body> </html> |
Nakon postavljanja osnovne strukture naših web stranica, stvorite tri klase sekcija – dvije za pozadinske slike i jednu za statičnu običnu pozadinu. Zatim dodajte sljedeće retke koda u oznaku <body> tag:
|
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>Prije efekta paralaksnog pomicanja</h1> </section> <section class="section static"> <h1>Dobrodošli u paralaksno pomicanje</h1> </section> <section class="section parallax bg2"> <h1>Nakon efekta paralaksnog pomicanja</h1> </section> </main> ... </body> |
Umetanje HTML kodova u oznaku <body> tag dovršava osnovno postavljanje naše html.datoteke. U sljedećim koracima uvest ćemo CSS i definirati opcije oblikovanja za svaki.
Step 3: Introduction to CSS
Oblikujmo web stranicu dodavanjem CSS datoteke i stvaranjem efekta paralakse. Prvo stvorite CSS datoteku u mapi css-parallax mapa u koju ćemo staviti sve CSS kodove potrebne za stvaranje efekta paralaksnog pomicanja. Nakon toga umetnite styles.css datoteku u vašoj css-parallax mapi pomoću naredbe nano naredbe:
|
1 |
nano styles.css |
Stilizirat ćemo našu web stranicu počevši s .wrapper klasom. Klasa .wrapper postavlja svojstva perspektive i pomicanja za cijelu stranicu. Počnite s klasom wrapper i odredite njezinu visinu, preljev (overflow) i perspektivu. Postavite visinu wrappera na konstantnu vrijednost kako bi efekt paralaksnog pomicanja radio. U ovom smo vodiču postavili vrijednost viewporta koristeći 100vh kako bismo dobili punu visinu viewporta zaslona. Možete izmijeniti vh vrijednost na temelju potreba vašeg projekta. Zatim onemogućite vodoravnu traku za pomicanje zaslona postavljanjem svojstva overflow-x kao hidden. Također, odredite vrijednost svojstva perspective kao 3px. Dodajmo sljedeće retke koda u styles.css datoteku:
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Korak 4: Dodajte stil za klasu .section
Nakon klase wrapper, dodajte stilove u klasu .section . Klasa .section definira veličinu, prikaz i svojstva teksta za glavne odjeljke. Postavite poziciju kao relative kako biste uskladili relativno pozicioniranje podređenog elementa .parallax::after i nadređenog elementa .section. Zadržite view-height(vh) kao 100 kako biste dobili punu visinu viewporta zaslona. Dodajte, izmijenite i stilizirajte ostale parametre prema svojim potrebama.
Unutar svoje styles.css datoteke dodajte sljedeći kod nakon klase 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; } |
Zatim ćemo dodati pseudo-element i stilizirati ga kako bismo stvorili efekt paralakse i stavili ga u funkciju.
Korak 5: Dodajte stilove za klasu .parallax
U ovom koraku dodat ćemo pseudo-element na .parallax. Ovaj pseudo-element bit će posljednje podređeno dijete elementa i dodat će pseudo-element ::after pozadinskoj slici odgovornoj za pokretanje efekta paralakse. U prvoj polovici koda postavljena je osnovna specifikacija prikaza i pozicioniranje pseudo-elementa. U sljedećoj polovici dodati ćemo svojstvo transformacije pomoću CSS funkcije translateZ() i zadržati ga kao (-1px). Osim toga, dodajte z-index za kontrolu okomitog slaganja.
Dodajte sljedeći kod ispod klase .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; } ... |
Korak 6: Dodajte slike i pozadinu za svaki odjeljak
Dodajmo konačna CSS svojstva u pozadinske slike i boju pozadine statičnog odjeljka. Započnite s dodavanjem pune boje pozadine u .static odjeljak. Postavite boju pozadine kao aqua i dodajte sljedeći kod nakon klase .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 pozadinu statičnom odjeljku koji nema sliku. Druga dva odjeljka s .parallax klasom imaju jedinstvene klase namijenjene za držanje pozadinskih slika. Dodajte URL-ove pozadinskih slika u .bg1 i .bg2 klase.
In ovom vodiču koristimo nasumične slike s Unsplash. Također možete koristiti slike s drugih web stranica poput Pixapay, Placekitten, i Pexels, da spomenemo samo neke, i prilagoditi ih kako želite. Dodajte sljedeći kod u .static klasu:
|
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'); ... |
Korak 7: Povežite CSS s HTML-om
Sada kada smo dodali sav kod za efekt paralaksnog pomicanja, povežimo styles.css datoteku s 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>Paralaksni efekt pomicanja uz CSS</title> </head> ... |
Otvorite index.html koji smo stvorili u Koraku 2 i u pregledniku Chrome:
Zaključak
U ovom smo vodiču prošli kroz korake postavljanja funkcionalne web stranice pomoću osnovnih postavki. Postoji mnoštvo drugih zanimljivih opcija i mogućnosti prilagodbe s kojima možete eksperimentirati. Možete pokušati dodati efekte sjene, modificirati pomicanje slika i druge prilagodbe kako bi vaše učenje bilo zabavno i uzbudljivo.
Kako biste dublje zaronili u teme web razvoja, pogledajte ove resurse s našeg bloga:
- Vodič za dodavanje JavaScripta u HTML
- Rad s JavaScriptom: Što su objekti
- Što je jQuery i kako ga možete koristiti
Sretno kodiranje!
Komentari
Još nema komentara. Budite prvi.