Johdanto
Moderni CSS on tehokas työkalu, jolla voit luoda monia kehittyneitä Käyttöliittymäominaisuuksia (UI). Aiemmin nämä ominaisuudet tukeutuivat JavaScript-kirjastoihin.
tässä oppaassa voit määrittää muutaman CSS-rivin luodaksesi verkkosivulle vieritettävän parallaksi-efektin. Voit käyttää placekitten.com kuvia paikkamerkittyinä taustakuvina.
sinulla on verkkosivu, jossa on puhdas CSS-vieritys parallax-efekti, kun olet suorittanut opetusohjelman.
Varoitus: Tässä artikkelissa käytetään kokeellisia CSS-ominaisuuksia, jotka eivät toimi selaimissa. Tämä projekti on testattu ja toimii Chromella.
Tämä tekniikka ei toimi hyvin Firefoxissa, Safarissa ja iOS: ssä johtuen joidenkin selainten optimoinneista.
Vaihe 1 — uuden projektin luominen
tässä vaiheessa käytä komentoriviä uuden projektikansion ja tiedostojen määrittämiseen. Aloita avaamalla pääte ja luomalla uusi projektikansio.
kirjoita seuraava komento luodaksesi projektikansion:
- mkdir css-parallax
tässä tapauksessa kutsuit kansiota css-parallax. Nyt muutetaan css-parallax kansio:
- cd css-parallax
seuraavaksi Luo index.html tiedosto css-parallax kansio, jossa nano Command:
- nano index.html
laitat kaikki projektin HTML-koodit tähän tiedostoon.
seuraavassa vaiheessa aloitetaan verkkosivun rakenteen luominen.
Vaihe 2 — sovelluksen rakenteen määrittäminen
tässä vaiheessa lisätään projektin rakenteen luomiseen tarvittava HTML.
index.html file add the following code:
<!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>Tämä on useimpien HTML.
lisätään seuraava koodi <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>tämä koodi luo kolme eri osiota. Kahdella on taustakuva ja yhdellä staattinen, tavallinen tausta.
seuraavien vaiheiden aikana jokaisen osion tyylit lisätään käyttämällä HTMLlisäämiäsi luokkia.
Vaihe 3 — CSS-tiedoston luominen ja alkuperäisen css: n lisääminen
tässä vaiheessa luodaan CSS tiedosto. Sitten voit lisätä alkuperäisen CSS tarvitaan tyyli verkkosivuilla ja luoda parallaksi vaikutus.
luo ensin styles.css tiedosto css-parallax kansio nano komento:
- nano styles.css
tähän laitetaan kaikki parallaksi-vieritysefektin luomiseen tarvittava CSS.
seuraavaksi aloitetaan .wrapper Luokka. styles.css file add the following code:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}.wrapper Luokka asettaa perspektiivin ja vieritysominaisuudet koko sivulle.
kääreen korkeus on asetettava kiinteään arvoon, jotta vaikutus toimisi. Näytön kuvaikkunan täyden korkeuden saa käyttämällä vh asetettuna 100.
Kun kuvat skaalataan, ne lisäävät näyttöön vaakasuuntaisen vierityspalkin, jolloin sen voi poistaa käytöstä lisäämällä overflow-x: hidden;perspective ominaisuus simuloi etäisyyttä kuvaikkunasta pseudoelementteihin, joita luot ja muunnat alempana CSS.
seuraavassa vaiheessa lisää CSS: ää verkkosivun tyylittelyyn.
Vaihe 4-tyylien lisääminen.lohkoluokka
tässä vaiheessa lisätään tyylejä .section luokkaan.
styles.css tiedosto Lisää kääreluokan alle seuraavan koodin:
.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 Luokka määrittelee pääjaksojen koon, näytön ja tekstin ominaisuudet.
Aseta relative niin, että lapsi, .parallax::after voidaan sijoittaa ehdottomasti suhteessa emoalkioon .section.
jokaisella osuudella on view-height(vh) of 100, jotta näköaukko nousee täydelle korkeudelle. Tätä arvoa voidaan muuttaa ja asettaa mille korkeudelle haluat kunkin osan.
loppuosa CSS ominaisuuksia käytetään muotoilemaan ja lisäämään tekstiä kunkin osan sisällä. Se sijoittaa tekstin jokaisen osan keskelle ja lisää väriksi white.
seuraavaksi lisätään pseudoelementti ja stailataan se luomaan parallaksiefekti kahteen HTML.
Vaihe 5-tyylien lisääminen.parallaksiluokka
tässä vaiheessa tyylit lisätään .parallax luokkaan.
ensin lisätään pseudoelementti .parallax luokkaan tyyliteltäväksi.
Huomautus: Voit vierailla MDN web docs oppia lisää CSS pseudo-elementtejä.
lisätään .section Luokka:
....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 Luokka Lisää ::after pseudoelementin taustakuvaan ja antaa parallaksi-efektiin tarvittavat muunnokset.
pseudoelementti on alkuaineen viimeinen lapsi, jonka luokka on .parallax.
koodin alkupuoli näyttää ja sijoittaa psuedo-elementin. transform ominaisuus siirtää pseudoelementin takaisin pois kamerasta z-index ja skaalaa sen sitten takaisin ylös täyttääkseen kuvaikkunan.
koska pseudoelementti on kauempana, se näyttää liikkuvan hitaammin.
seuraavassa vaiheessa lisätään taustakuvat ja staattinen taustatyyli.
Vaihe 6 — lisäämällä kunkin osion kuvat ja taustan
tässä vaiheessa lisätään lopullinen CSS ominaisuudet lisättäväksi staattisen osion taustakuviin ja taustaväriin.
lisätään ensin yhtenäinen taustaväri .static osioon seuraavalla koodilla .parallax::after Luokka:
....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 Luokka Lisää staattiseen osaan taustan, jossa ei ole kuvaa.
kahdessa osassa, joiden .parallax Luokka on myös lisäluokka, joka on erilainen kummallekin. Käytä .bg1 ja .bg2 luokkia lisätäksesi kissanpennun taustakuvat.
lisätään .static Luokka:
....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 luokat lisäävät kunkin jakson vastaavat taustakuvat.
kuvat ovat placekittenin verkkosivuilta. Se on palvelu, jolla saa kuvia kissanpennuista käytettäväksi paikkamerkintöinä.
nyt kun kaikki Parallax-vieritysefektin koodi on lisätty, voit linkittää styles.css file in your index.html.
Step 7 — Linkkaustyylit.css ja Avausindeksi.html selaimessasi
tässä vaiheessa linkität styles.css – tiedoston ja avaat projektin selaimessasi nähdäksesi parallax-vieritysefektin.
lisää ensin <head> tag index.html tiedosto:
...<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>...nyt voit avata index.html tiedosto selaimessasi:
sen avulla olet perustanut toimivan verkkosivun, jossa on vieritysefekti. Tutustu tähän GitHub-arkistoon nähdäksesi koko koodin.
johtopäätös
tässä artikkelissa perustat projektin index.html ja styles.css – tiedostolla ja nyt sillä on toimiva verkkosivu. Olet lisännyt rakennetta verkkosivun ja luonut tyylejä eri osiot päällä.
käyttämäsi kuvat tai parallaksiefekti on mahdollista laittaa kauemmas, jotta ne liikkuvat hitaammin. Sinun täytyy muuttaa pikselimäärää perspective ja transform ominaisuudet. Jos et halua taustakuvan vierittävän lainkaan, käytä background-attachment: fixed; sijasta perspective/translate/scale.