Looge hiire juhitav parallaksi taustiefekt

parallaksi hiire sait
(Pildikrediit: Renaud Rohlinger)

Parallaksi kerimisega saidid on jätkuvalt populaarsed põhjusel: need loovad kasutajale meeldiva ja köitva sirvimiskogemuse. Oleme juba vaadanud parimat uimastamist parallaksi kerimine veebisaidid, et teid inspireerida, kuid mida teete, kui soovite mõne oma teha?

Õnneks on siin Prantsuse loovarendaja Renaud Rohlinger, kes näitab teile köisi, kuidas luua parallaksi kerimisfoon, mida saate hiirega juhtida. Vaadake hämmastavaid tulemusi veebisaidil tema sait ja seejärel õppige Rohlingerilt endalt, kuidas saate oma järgmises projektis efekti korrata.

Võiksite proovida ka ühte neist veebisaitide ehitajad ja kui kaalute saidi toimivust, kontrollige oma veebimajutus teenus töötab teie jaoks. Kas teil on meediumiteabe sait? Varundage usaldusväärsega pilvemälu .

01. Määratlege HTML-dokumendi raamistik

parallaksi hiire sait

Ühevärvilisele ekraanipildile avanedes paigutab sait animeeritud 3D-taustad kohe Jaapani tüpograafiaga(Pildikrediit: Renaud Rohlinger)

Esimene samm on HTML-dokumendi raamistiku määratlemine. See koosneb HTML-i konteinerist, mis kirjeldab dokumendi pea ja keha jaotisi. Kui peaosa linkib väliseid JavaScripti ja CSS-faile, kasutatakse 2. jaotises lehe sisu elementide määratlemiseks kehaosa.

Parallax Background *** STEP 2 HERE

02. Tuvastage HTML-i sisu

Keha sisu koosneb kuvatavast tekstist ja div-konteinerist, kasutades andmete parallaks atribuut. Just seda konteinerelementi kasutatakse parallaksi taustal, kusjuures iga selle algelement kujundatakse nõutavate taustpildidega. Selles näites on konteineril kolm div-kihti, mis tuleb luua laps-div-elementidest.

Hello!

03. Looge CSS parallaksikonteiner

parallaksi hiire sait

Allapoole kerides muutuvad asjad värvikamaks, julgustades kassi tegelast järgima ja klõpsates põhiportfelli(Pildikrediit: Renaud Rohlinger)

Looge uus fail nimega stiilid.css . Selle faili esimene samm määrab sisu vaikevärviks valge ja parallaksi taustakonteineri sätted. Parallaksimahutile rakendatakse fikseeritud positsioneerimist, et see jääks samasse asendisse, kui sisu üle selle kerib. Lehevärvina rakendatakse vaikevärvi, samas kui negatiivne z-indeks võimaldab konteineril ilmuda lehe sisu all.

html, body{ color: #fff; } [data-parallax]{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; background-color: #000; }

04. Seadistage CSS parallaksikihid

Kõik pildikihid on seatud kasutama absoluutset positsioneerimist, mille suurus vastab brauseri aknale. Selle näite parallaksi pilt põhineb kindla suurusega mustril, mis on määratud korduma. Võite valida pildi korrata ainult vertikaalselt kordus-y abil või horisontaalselt kordus-x abil.

[data-parallax] > *{ position: absolute; width: 100vw; height: 100vh; background-repeat: repeat; background-size: 20vw 20vw; }

05. Kasutage CSS-i taustkihte

parallaksi hiire sait

Soovides leida saidi reklaamist arendustööd, ei raiska Renaud võimalust näidata oma WebGL-i osavust(Pildikrediit: Renaud Rohlinger)

Kui kõik pildikihid jagavad 4. etapis määratletud asukoha ja suuruse sätteid, kasutab iga kiht ainulaadset pilti. N-nda lapse valijat kasutatakse parallaksimahuti iga üksiku elemendi viitamiseks. Taustpildi atribuuti kasutatakse kahe joone joonistamiseks, mis tekitab paanides ruudustikuefekti. Madalamates kihtides kasutatakse tumedamaid värve, et aidata tajuda sügavust.

[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. Tehke JavaScripti kihi initsiatsioon

Looge uus fail nimega code.js . See samm leiab parallaksi konteineri ja käivitab selle iga pildikihi andmete indeks atribuut, mida kasutatakse etapis 7. Seda tuleb teha brauseriakna laadimissündmusele lisatud funktsioonist, nii et kood käivitatakse alles siis, kui lehe sisu on valmis.

window.addEventListener('load', function(){ var container = document. querySelector('[data-parallax]'); var childNodes = container.children; for(var n=0; n

07. Arvuta JavaScripti hiire liikumine

Mõju tugineb iga parallaksi kihiga seotud piltide liigutamisele vastuseks hiire liikumisele. 6. etapis tuvastatud parallaksi konteineril on a hiireviis lisatud sündmuste kuulaja, mis käivitab funktsiooni parallaksikihtide taustapiltide ümberpaigutamiseks alati, kui toimub hiire liikumine. Igal kihil on liikumise arvutamine, mis põhineb 6. etapis rakendatud indeksnumbril.

container.addEventListener('mousemove', function(e){ var elms = this.children; for(var c=0; c

See artikkel ilmus algselt loomingulises veebidisaini ajakirjas Veebi disainer . Osta väljaanne 290 kohe.

Seotud artiklid: