Rellax.js - Besplatne značajke paralaksa pomoću JavaScripta Vanilla
Pomicanje paralakse Izgleda nevjerojatno kada je dobro. To nije značajka koju želite na svakoj web-lokaciji nego za kreativne web-lokacije i odredišne stranice, elemente paralakse brzo uhvatite pozornost.
Postoje tone besplatnih JavaScript biblioteka za animirani efekti pomicanja ali mnogi su naduti ili suviše složeni za neke ljude.
Zato preporučujem Rellax.js za vaše potrebe paralakse. To je besplatni open source plugin izgrađen na JavaScriptu vanilije, tako da nema ovisnosti.
Prema zadanim postavkama zahtijeva samo jednostavan poziv funkcije da biste dodijelili klasu paralakse elementima stranice. Onda, dok se pomičete, ovi elementi ostanite fiksni i kretati se zajedno sa stajalištem korisnika.
Ove elemente možete prilagoditi da se pojave bliže, dalje ili iza elemenata stranice. To stvara iluzija dubine na stranici i sve radi preko jedne jednostavne JavaScript biblioteke.
Sve Rellax izvorni kod je dostupan besplatno na GitHubu ako želite preuzeti kopiju.
Cijelo postavljanje koristi jednu JS funkciju koje ciljaju .rellax kao klasa:
var rellax = novi Rellax ('. rellax'); Imajte na umu da možete koristiti prilično mnogo bilo kojoj klasi koju želite, ali primjer demo koristi .rellax zbog jednostavnosti.
Odavde, vi samo omotajte svoje elemente paralakse unutar div s .rellax klasa i postavite atribut brzine. To djeluje kroz Podaci-rellax brzine prilagođeni atribut koji prihvaća vrijednosti od -10 do +10.
Evo jednog primjer isječka iz HTML-a na demo stranici:
Jako sam spora i glatka
Također možete središnji elementi na stranici i prilagodite položaje elemenata putem CSS-a.
Rellax vam ne govori kako strukturirati stranicu ili kako definirati CSS elemente na svojoj stranici. Sve što radi jest stvorite prirodni efekt pomicanja paralakse s čistim JavaScriptom. Na koji način to koristite ovisi o vama.
Da biste vidjeli a demo uživo, zavirite u glavnu stranicu ili pregledajte GitHub repo. To uključuje i neku dokumentaciju, kao i poveznice na web-lokacije uživo pomoću programa Rellax.js.
I što je najvažnije, tim je stalno spreman podnijeti zahtjeve za povlačenje, pa ako primijetite bilo kakve probleme ili imate prijedloge za značajke, jednostavno pošaljite brzu poruku timu.
