Introducere
CSS Modern este un instrument puternic pe care îl puteți utiliza pentru a crea multe funcții avansate de interfață cu utilizatorul (UI). În trecut, aceste caracteristici se bazau pe bibliotecile JavaScript.
în acest ghid, veți configura câteva linii CSS pentru a crea un efect de paralaxă defilare pe o pagină web. Veți folosi imagini dinplacekitten.com ca imagini de fundal substituent.
veți avea o pagină web cu un efect de paralaxă pur CSS defilare după ce ați terminat tutorialul.
avertisment: Acest articol utilizează Proprietăți CSS experimentale care nu funcționează în browsere. Acest proiect a fost testat și funcționează pe Chrome.
această tehnică nu funcționează bine în Firefox, Safari și iOS din cauza unor optimizări ale acestor browsere.
Step 1 — Crearea unui nou proiect
În acest pas, Utilizați linia de comandă pentru a configura un nou dosar de proiect și fișiere. Pentru a începe, deschideți terminalul și creați un nou folder de proiect.
tastați următoarea comandă pentru a crea folderul de proiect:
- mkdir css-parallax
în acest caz, ați apelat folderul css-parallax. Acum, schimbați încss-parallax folder:
- cd css-parallax
apoi, creați unindex.html fișier încss-parallax folder cunano comandă:
- nano index.html
veți pune tot codul HTML pentru proiect în acest fișier.
în pasul următor, veți începe să creați structura paginii web.
Step 2 — Configurarea structurii aplicației
În acest pas, veți adăuga HTML-ul necesar pentru a crea structura proiectului.
în fișierulindex.html adăugați următorul cod:
<!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>aceasta este structura de bază a majorității paginilor web care utilizează HTML.
adăugați următorul cod în<body> tag:
<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>acest cod creează trei secțiuni diferite. Două vor avea o imagine de fundal, iar una va fi un fundal static, simplu.
în următorii pași, veți adăuga stilurile pentru fiecare secțiune folosind clasele pe care le-ați adăugat înHTML.
Step 3 — Crearea unui fișier CSS și adăugarea CSS inițială
În acest pas, veți crea unCSS fișier. Apoi, veți adăuga CSS-ul inițial necesar pentru a stiliza site-ul web și pentru a crea efectul de paralaxă.
Mai întâi, creați un fișier styles.css în folderul css-parallax cu comanda nano :
- nano styles.css
aici veți pune toate CSS-urile necesare pentru a crea efectul de defilare paralaxă.
apoi, începeți cu clasa.wrapper. În interiorul fișierului styles.css adăugați următorul cod:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}.wrapper clasa setează proprietățile de perspectivă și defilare pentru întreaga pagină.
înălțimea învelișului trebuie setată la o valoare fixă pentru ca efectul să funcționeze. Puteți utiliza unitatea de vizualizare vhsetată la100 pentru a obține înălțimea completă a ferestrei ecranului.
când scalați imaginile, acestea vor adăuga o bară de derulare orizontală pe ecran, astfel încât să o puteți dezactiva adăugândoverflow-x: hidden;. Proprietateaperspective simulează distanța de la portul de vizualizare la pseudo-elementele pe care le veți crea și transforma mai jos înCSS.
în pasul următor, veți adăuga mai multe CSS pentru a vă stiliza pagina web.
Pas 4 — adăugarea stiluri pentru .secțiunea clasa
În acest pas, veți adăuga stiluri la.section clasa.
în interiorul fișieruluistyles.css adăugați următorul cod sub clasa wrapper:
.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;}.section clasa definește dimensiunea, afișarea și proprietățile textului pentru secțiunile principale.
setați o poziție derelative astfel încât copilul,.parallax::after să poată fi poziționat absolut în raport cu elementul părinte.section.
fiecare secțiune are unview-height(vh) de100 pentru a prelua înălțimea completă a portului de vizualizare. Această valoare poate fi modificată și setată la orice înălțime preferați pentru fiecare secțiune.
în cele din urmă, restulCSS proprietățile sunt utilizate pentru a formata și adăuga stil textului din interiorul fiecărei secțiuni. Poziționează textul în centrul fiecărei secțiuni și adaugă o culoare de white.
apoi, veți adăuga un pseudo-element și îl veți stiliza pentru a crea efectul de paralaxă pe două dintre secțiunile dinHTML.
Pas 5 — Adăugarea stiluri pentru .clasa paralaxă
În acest pas, veți adăuga stilurile la clasa.parallax.
În primul rând, veți adăuga un pseudo-element pe.parallax clasa care urmează să fie stilată.
Notă: puteți vizita MDN web docs pentru a afla mai multe despre CSS pseudo-elemente.
adăugați următorul cod sub.section clasa:
....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 clasa adaugă un ::after pseudo-element la imaginea de fundal și oferă transformările necesare pentru efectul de paralaxă.
pseudoelementul este ultimul copil al elementului cu clasa.parallax.
prima jumătate a codului afișează și poziționează psuedo-elementul. Proprietateatransform mută pseudo-elementul înapoi de la aparatul foto de pez-index, apoi îl scalează înapoi pentru a umple portul de vizualizare.
deoarece pseudo-elementul este mai departe, se pare că se mișcă mai încet.
în pasul următor, veți adăuga în imaginile de fundal și stilul de fundal static.
Step 6 — adăugarea imaginilor și fundalului pentru fiecare secțiune
În acest pas, veți adăuga proprietățile finaleCSS pentru a adăuga imaginile de fundal și culoarea de fundal a secțiunii statice.
Mai întâi, adăugați o culoare de fundal solidă la secțiunea.static cu următorul cod după.parallax::after clasa:
....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;}....static clasa adaugă un fundal secțiunii statice care nu are o imagine.
cele două secțiuni cu.parallax au, de asemenea, o clasă suplimentară care este diferită pentru fiecare. Utilizați.bg1 și.bg2 clase pentru a adăuga imagini de fundal pisoi.
adăugați următorul cod la.static clasa:
....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');}...clasele .bg1, .bg2 adaugă imaginile de fundal respective pentru fiecare secțiune.
imaginile sunt de pe site-ul placekitten. Este un serviciu pentru a obține imagini de pisoi pentru utilizare ca substituenți.
acum că se adaugă tot codul pentru efectul de defilare paralaxă, vă puteți conecta la fișierulstyles.css dinindex.html.
Pasul 7 — stiluri de legătură.css și indexul de deschidere.html în browserul dvs.
În acest pas, veți conecta fișierulstyles.css și veți deschide proiectul în browserul dvs. pentru a vedea efectul de derulare a paralaxei.
Mai întâi, adăugați următorul cod la eticheta<head> din fișierulindex.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>...acum, puteți deschide fișierul index.html în browserul dvs.:
cu aceasta, ați configurat o pagină web funcțională cu efect de defilare. Consultați acest depozit GitHub pentru a vedea codul complet.
concluzie
în acest articol, configurați un proiect cu un fișierindex.html șistyles.css și acum aveți o pagină web funcțională. Ați adăugat în structura paginii dvs. web și ați creat stiluri pentru diferitele secțiuni de pe site.
este posibil să puneți imaginile pe care le utilizați sau efectul de paralaxă mai departe, astfel încât să se miște mai încet. Va trebui să modificați valoarea pixelilor pe proprietățile perspective și transform. Dacă nu doriți ca o imagine de fundal să se deruleze deloc, utilizați background-attachment: fixed; în loc de perspective/translate/scale.