Rellax.js - Gratis Parallax Funksjoner Bruke Vanilla JavaScript
Parallax rulling ser utrolig ut når det er gjort riktig. Det er ikke en funksjon du vil ha på alle nettsteder, men for kreative nettsteder og destinasjonssider, parallaxelementer grip oppmerksomheten fort.
Det er tonnevis av gratis JavaScript-biblioteker for animerte rullende effekter men mange er oppblåst eller bare for komplekse for noen mennesker.
Det er derfor jeg anbefaler Rellax.js for parallax behov. Det er en gratis åpen kildekode plugin bygget på vanilje JavaScript, så det har ingen avhengigheter.
Som standard er det krever bare en enkel funksjonsanrop å tildele parallax-klassen til sideelementer. Så, når du ruller, disse elementene forbli fast og flytte sammen med brukerens synspunkt.
Du kan tilpasse disse elementene til å vises nærmere, lenger unna eller bak sideelementene. Dette skaper illusjon av dybde på siden, og alt fungerer via et enkelt JavaScript-bibliotek.
Alle Rellax kildekoden er tilgjengelig gratis på GitHub hvis du vil laste ned en kopi.
Hele oppsettet bruker en enkelt JS-funksjon målrettet mot .rellax klasse slik:
var rellax = ny rellax ('rellax'); Merk at du kan bruke ganske mye hvilken som helst klasse du vil ha, men eksemplet demoen bruker .rellax for enkelhets skyld.
Herfra er du bare vikle parallaxelementene dine inne i en div med .rellax klasse og sett hastighetsattributtet. Dette fungerer gjennom data-rellax hastighet egendefinert attributt som aksepterer verdier fra -10 til +10.
Her er en eksempelbit fra HTML på demo siden:
Jeg er ekstra langsom og glatt
Du kan også senterelementer på siden og tilpasse elementposisjonene via CSS.
Rellax forteller deg ikke hvordan du skal strukturere siden eller hvordan du definerer CSS-elementer på siden din. Alt det gjør er lag en naturlig parallax rullende effekt med rent JavaScript. Hvordan du bruker dette, er helt opp til deg.
For å se en live demo, ta en titt på hovedstedet eller bla gjennom GitHub repo. Dette inkluderer noen dokumentasjon, sammen med linker til live nettsteder ved hjelp av Rellax.js.
Og best av alt, teamet er hele tiden villig til å ta trekkforespørsler, så hvis du merker noen problemer eller har forslag til funksjoner, send kun en rask melding til laget.
