Sisältö
- 01. Määritä HTML-dokumenttikehys
- 02. Tunnista HTML-sisältö
- 03. Luo CSS-parallaksisäiliö
- 04. Määritä CSS-parallaksikerrokset
- 05. Käytä CSS-taustakerroksia
- 06. Suorita JavaScript-tason alustus
- 07. Laske JavaScript-hiiren liike
Parallaksirullaavat sivustot ovat edelleen suosittuja syystä: ne luovat käyttäjälle miellyttävän ja kiinnostavan selauskokemuksen. Olemme jo tarkastelleet parhaita upeita parallaksirullasivustoja inspiroimaan sinua, mutta mitä teet, jos haluat tehdä omasi?
Onneksi ranskalainen luovakehittäjä Renaud Rohlinger on täällä näyttämässä köydet kuinka luoda parallaksirullaava tausta, jota voit hallita hiirellä. Katso upeita tuloksia hänen sivustollaan ja opi sitten alla olevalta Rohlingerilta itseltä, kuinka voit toistaa vaikutuksen seuraavassa projektissasi.
Voit myös kokeilla yhtä näistä verkkosivustojen rakentajista, ja samalla kun harkitset sivuston suorituskykyä, tarkista, että web-hosting-palvelusi toimii sinulle. Onko sinulla median raskas sivusto? Varmuuskopioi luotettavalla pilvitallennustilalla.
01. Määritä HTML-dokumenttikehys
Ensimmäinen vaihe on määritellä HTML-asiakirjan kehys. Tämä koostuu HTML-säilöstä, joka kuvaa asiakirjassa olevan päätä ja runkoa koskevia osioita. Vaikka pääosa linkittää ulkoiset JavaScript- ja CSS-tiedostot, runko-osaa käytetään määrittämään sivun sisältöelementit vaiheessa 2.
! DOCTYPE html> html> head> title> Parallax Background / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> script src = "code.js"> / script> / head> body> * * * VAIHE 2 TÄSTÄ / body> / html>
02. Tunnista HTML-sisältö
Rungon sisältö koostuu näyttötekstistä ja div-säiliöstä käyttäen data-parallaksi määritteen. Tätä säiliöelementtiä käytetään parallaksitaustaan, ja jokainen sen alielementti muotoillaan vaadituilla taustakuvilla. Tässä esimerkissä säilössä on kolme kuvakerrosta, jotka on luotava lapsi div -elementeistä.
h1> Hei! / h1> div data-parallaksi> div> / div> div> / div> div> / div> / div>
03. Luo CSS-parallaksisäiliö
Luo uusi tiedosto nimeltä styles.css. Tämän tiedoston ensimmäinen vaihe asettaa oletussisällön väriksi valkoisen ja parallaksitausta-astian asetukset. Kiinteä paikannus kohdistetaan parallaksisäiliöön, jotta se pysyy samassa asennossa kuin sisältö vierittää sen yli. Sivuvärinä käytetään oletusväriä, kun taas negatiivisen z-indeksin avulla säilö näkyy sivun sisällön alla.
html, body {väri: #fff; } [data-parallaksi] {sijainti: kiinteä; leveys: 100vw; korkeus: 100vh; yläosa: 0; vasen: 0; z-indeksi: -1; taustaväri: # 000; }
04. Määritä CSS-parallaksikerrokset
Kukin kuvakerroksista on asetettu käyttämään absoluuttista sijaintia, jonka koko vastaa selainikkunaa. Tämän esimerkin parallaksikuva perustuu tiettyyn kokoiseen kuvioon, joka on asetettu toistettavaksi. Voit halutessasi toistaa kuvan vain pystysuunnassa käyttämällä toistoa-y tai vaakasuunnassa käyttämällä toistoa-x.
[data-parallaksi]> * {sijainti: absoluuttinen; leveys: 100vw; korkeus: 100vh; tausta-toisto: toista; taustakoko: 20vw 20vw; }
05. Käytä CSS-taustakerroksia
Kukin kuvakerroksista jakaa vaiheessa 4 määritellyt sijainti- ja kokoasetukset, mutta kukin kerros käyttää yksilöllistä kuvaa. Yhdeksännen lapsen valitsinta käytetään viittaamaan jokaiseen yksittäiseen elementtiin parallaksisäiliössä. Taustakuvan määritettä käytetään kahden linjan piirtämiseen, mikä luo ruudukkoefektin laatoitettuna. Alemmissa kerroksissa käytetään tummempia värejä, jotta saadaan käsitys syvyydestä.
[data-parallaksi]> *: nth-child (1) {taustakuva: lineaarinen gradientti (oikealle, # 333 1px, läpinäkyvä 1px), lineaarinen gradientti (alareunaan, # 333 1px, läpinäkyvä 1px); } [data-parallaksi]> *: nth-child (2) {taustakuva: lineaarinen gradientti (oikealle, # 777 1px, läpinäkyvä 1px), lineaarinen gradientti (alareunaan, # 777 1px, läpinäkyvä 1px) ; } [data-parallaksi]> *: nth-child (3) {taustakuvan lineaarinen gradientti (oikealle, #fff, läpinäkyvä 1px), lineaarinen gradientti (alareunaan, #fff 1px, läpinäkyvä 1px); }
06. Suorita JavaScript-tason alustus
Luo uusi tiedosto nimeltä code.js. Tämä vaihe etsii parallaksisäiliön ja aloittaa kaikki sen kuvakerrokset data-indeksi attribuutti, jota käytetään vaiheessa 7. Tämä on suoritettava selainikkunan lataustapahtumaan liitetystä toiminnosta, jotta koodi suoritetaan vasta, kun sivun sisältö on valmis.
window.addEventListener ("load", function () {var container = document. querySelector ("[data-parallax]"); var childNodes = container.children; for (var n = 0; nchildNodes.length; n ++) {childNodes [n] .setAttribute ("data-index", n + 1);} * * * * VAIHE 7 TÄSTÄ});
07. Laske JavaScript-hiiren liike
Vaikutus perustuu kuhunkin parallaksikerrokseen liittyvien kuvien siirtämiseen vasteena hiiren liikkeelle. Vaiheessa 6 tunnistetulla parallaksisäiliöllä on a hiiren siirto liitteenä tapahtumakuuntelija, joka käynnistää toiminnon parallaksikerrosten taustakuvien sijoittamiseksi aina, kun hiirtä liikutetaan. Jokaisella kerroksella on liikelaskelma, joka perustuu vaiheessa 6 sovellettuun indeksinumeroon.
container.addEventListener ("hiirensiirto", funktio (e) {var elms = tämä.lapset; for (var c = 0; celms.length; c ++) {var motion = parseInt (elms [c]. getAttribute ("data-index ")) / 10; var x = ((e.clientX) * liike) +" px "; var y = ((e.asiakasY) * liike) +" px "; hirmut [c] .style.backgroundPosition = x + "" + y;}});
Tämä artikkeli julkaistiin alun perin luovassa verkkosivujen lehdessä Nettisivujen suunnittelija. Osta numero 290 nyt.
