Luo hiirellä ohjattu parallaksitaustatehoste

parallaksihiirisivusto
(Kuvan luotto: Renaud Rohlinger)

Parallaksirullaavat sivustot ovat edelleen suosittuja syystä: ne luovat käyttäjälle miellyttävän ja kiinnostavan selauskokemuksen. Olemme jo tarkastelleet parasta upeaa parallaksi vieritys verkkosivustoja inspiroimaan sinua, mutta mitä teet, jos haluat tehdä omasi?

miten tehdä perspektiivi kuvittaja

Onneksi ranskalainen luovakehittäjä Renaud Rohlinger on täällä näyttämässä köydet kuinka luoda parallaksirullaava tausta, jota voit hallita hiirellä. Katso hämmästyttävät tulokset hänen sivustoaan ja opi sitten alla olevalta Rohlingerilta itseltään, kuinka voit toistaa vaikutuksen seuraavassa projektissasi.



Voit myös kokeilla yhtä näistä verkkosivujen rakentajat , ja kun harkitset sivuston suorituskykyä, tarkista sivujen ylläpito palvelu toimii sinulle. Onko sinulla median raskas sivusto? Varmuuskopioi luotettavasti pilvitallennus .



01. Määritä HTML-dokumenttikehys

parallaksihiirisivusto

Yksiväriseen tilaruutuun avautuva sivusto asettaa välittömästi animoitujen 3D-taustojen ja japanilaisen typografian rinnalle(Kuvan luotto: Renaud Rohlinger)

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. Kun pääosa linkittää ulkoiset JavaScript- ja CSS-tiedostot, runko-osaa käytetään määrittämään sivun sisältöelementit vaiheessa 2.



Parallax Background *** STEP 2 HERE

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ä.

Hello!

03. Luo CSS-parallaksisäiliö

parallaksihiirisivusto

Vierittämällä alaspäin asiat muuttuvat värikkäimmiksi kannustamalla seuraamaan kissan hahmoa ja napsauttamalla pääportfolion läpi(Kuvan luotto: Renaud Rohlinger)

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{ color: #fff; } [data-parallax]{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; background-color: #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 toistumaan. Voit halutessasi toistaa kuvan vain pystysuunnassa käyttämällä Repeat-y: tä tai vaakasuunnassa käyttämällä Repeat-x: ää.



macbook pro 15 tuuman kova kansi
[data-parallax] > *{ position: absolute; width: 100vw; height: 100vh; background-repeat: repeat; background-size: 20vw 20vw; }

05. Käytä CSS-taustakerroksia

parallaksihiirisivusto

Haluaa löytää kehitystyötä sivuston julkisuuden kautta, Renaud ei tuhlaa mahdollisuutta esitellä WebGL-taitojaan(Kuvan luotto: Renaud Rohlinger)

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-parallax] > *:nth-child(1){ background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px); } [data-parallax] > *:nth-child(2){ background-image: linear-gradient(to right, #777 1px, transparent 1px), linear-gradient(to bottom, #777 1px, transparent 1px); } [data-parallax] > *:nth-child(3){ background-image linear-gradient(to right, #fff, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); }

06. Suorita JavaScript-tason alustus

Luo uusi tiedosto nimeltä code.js . Tämä vaihe etsii parallaksisäiliön ja aloittaa sen kaikki 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; n

07. Laske JavaScript-hiiren liike

Vaikutus perustuu kuhunkin parallaksikerrokseen liittyvien kuvien siirtämiseen vastauksena hiiren liikkeeseen. Vaiheessa 6 tunnistetulla parallaksisäiliöllä on a hiiren siirto liitetty tapahtumakuuntelija, joka käynnistää toiminnon parallaksikerrosten taustakuvien sijoittamiseksi uudelleen hiiren liikkuessa. Jokaisella kerroksella on liikelaskelma, joka perustuu vaiheessa 6 sovellettuun indeksinumeroon.

kynä kaikille kosketusnäytöille
container.addEventListener('mousemove', function(e){ var elms = this.children; for(var c=0; c

Tämä artikkeli julkaistiin alun perin luovan verkkosivujen lehdessä Nettisivujen suunnittelija . Osta numero 290 nyt.

Aiheeseen liittyvät artikkelit: