Rellax.js - Vaba parallaaksi funktsioonid Vanilla JavaScripti abil

Parallaaksi kerimine tundub uskumatu, kui see on õige. See ei ole iga veebisaidi jaoks vajalik funktsioon, vaid loomingulised saidid ja sihtleheküljed, parallaksielemendid haarake tähelepanu kiiresti.

Seal on tonni tasuta JavaScripti raamatukogusid animeeritud kerimisefektid kuid paljud on paisunud või mõnedele inimestele liiga keerulised.

Sellepärast soovitan Rellax.js teie parallaksi vajadustele. See on tasuta avatud lähtekoodiga plugin, mis on ehitatud vanilje JavaScript'ile pole mingeid sõltuvusi.

Vaikimisi see nõuab ainult lihtsat funktsioonikõnet parallaksi klassi määramiseks leheküljeelementidele. Siis, kui liigute, need elemendid püsima ja liikuda koos kasutaja vaatepunktiga.

Võite neid elemente kohandada, et need ilmuksid lehekülje elementide lähemale, kaugemale või taga. See loob sügavuse illusioon lehel ja see kõik toimib ühe lihtsa JavaScripti raamatukogu kaudu.

Kogu Rellaxi lähtekood on tasuta saadaval GitHubis, kui soovite koopia alla laadida.

Kogu seadistus kasutab ühte JS-funktsiooni sihtimine .rellax selline klass:

 var rellax = uus Rellax (". rellax"); 

Pange tähele, et saate kasutada üsna palju mis tahes klass, mida soovite, demo kasutab näiteks .rellax lihtsuse pärast.

Siit sa lihtsalt wrap oma parallaksi elemendid sees .rellax klass ja määrake kiiruse atribuut. See toimib läbi andmete taastamise kiirus kohandatud atribuut, mis aktsepteerib väärtusi -10 kuni +10.

Siin on näite fragment demo lehel olevast HTML-ist:

 
 Ma olen väga aeglane ja sujuv 
 

Sa saad ka keskelemente lehel ja elemendi positsioonide kohandamine CSS kaudu.

Rellax ei ütle teile, kuidas lehekülge struktureerida või kuidas lehel CSS-elemente määratleda. Kõik see on luuakse loomulik parallaksi kerimise efekt puhta JavaScriptiga. Kuidas te seda kasutate, on teie enda otsustada.

Et näha a live demo, võtke sisse peamine sait või sirvige GitHub repot. See sisaldab mõningaid dokumente koos linkidega elavatele veebisaitidele, mis kasutavad Rellax.js-i.

Ja mis kõige parem, on meeskond pidevalt valmis võtma tõmbenõudeid, nii et kui te märkate mingeid probleeme või teil on ettepanekuid funktsioonide kohta, saatke lihtsalt kiire sõnum meeskonnale.