Rellax.js - Brezplačne funkcije paralakse z uporabo Vanilla JavaScripta

Pomikanje po paralaksi izgleda odlično, ko je pravilno. To ni funkcija, ki jo boste želeli na vsaki spletni strani, ampak za ustvarjalna spletna mesta in ciljne strani, elemente paralakse hitro vzemite pozornost.

Obstaja ton prostega JavaScript knjižnice za animirani učinki drsenja mnogi pa so napihnjeni ali preveč zapleteni za nekatere ljudi.

Zato priporočam Rellax.js za vaše potrebe paralakse. To je brezplačen odprtokodni vtičnik, zgrajen na vanilinem JavaScriptu nima nobenih odvisnosti.

Privzeto je zahteva samo preprost klic funkcije za dodelitev razreda paralakse elementom strani. Potem, ko se pomikate, te elemente ostanite fiksni in se premikate skupaj s stališčem uporabnika.

Te elemente lahko prilagodite, da se prikažejo bližje, dlje ali za elementi strani. To ustvari iluzijo globine na strani in vse deluje preko ene preproste knjižnice JavaScript.

Vse izvorne kode Rellax so na voljo brezplačno na GitHubu, če želite prenesti kopijo.

Celotna nastavitev uporablja eno samo funkcijo JS ciljanje .rellax razred tako:

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

Opomba lahko uporabite precej kateri koli razred, ki ga želite, ampak primer demo uporablja .rellax zaradi preprostosti.

Od tu, vi prav ovijte elemente paralakse znotraj div z .rellax razred in nastavite atribut hitrosti. To deluje preko data-rellax-speed atribut po meri, ki sprejema vrednosti od -10 do +10.

Tukaj je primer odrezka iz HTML-ja na predstavitveni strani:

 
 Zelo sem počasna in gladka 
 

Lahko tudi elementov na strani in prilagodite položaje elementov preko CSS.

Rellax vam ne pove, kako strukturirati stran ali kako določiti elemente CSS na vaši strani. Vse to počne ustvarite naravni učinek pomikanja paralakse s čistim JavaScriptom. Kako ga uporabljate, je popolnoma odvisno od vas.

Če želite videti a demo v živo, pokukajte na glavno stran ali brskajte po repu GitHub. To vključuje nekaj dokumentacije, skupaj s povezavami do spletnih mest z živo rabo, ki uporabljajo Rellax.js.

In najboljše od vsega, ekipa je nenehno pripravljena prevzeti povpraševanje, zato, če opazite kakršne koli težave ali imate predloge za funkcije, preprosto pošljite hitro sporočilo skupini.