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 nettsider, men for kreative nettsteder og destinasjonssider, parallax elementer griper oppmerksomheten fort .

Det finnes tonnevis av gratis JavaScript-biblioteker for animerte rullingseffekter, men mange er oppblåst eller bare for komplekse for noen mennesker.

Derfor anbefaler jeg Rellax.js for parallaxbehovene dine. Det er en gratis åpen kildekode plugin bygget på vanilje JavaScript, så det har ingen avhengigheter .

Som standard krever det bare et enkelt funksjonsanrop for å tilordne parallax-klassen til sideelementer. Da, mens du ruller, forblir disse elementene faste og beveger seg sammen med brukerens synspunkt.

Du kan tilpasse disse elementene til å vises nærmere, lenger unna eller bak sideelementene. Dette skaper en 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 som målretter mot .rellax- klassen slik:

 var rellax = ny Rellax ('. rellax'); 

Legg merke til at du kan bruke stort sett hvilken som helst klasse du vil, men eksempeldemoen bruker .rellax for enkelhets skyld.

Herfra pakker du bare parallaxelementene dine inn i en div med .rellax klassen og angir hastighetsattributtet . Dette fungerer gjennom tilpasset attributt for data-rellax-speed som aksepterer verdier fra -10 til +10.

Her er et eksempelbrikke fra HTML-en på siden for demo:

 Jeg er ekstra langsom og glatt 

Du kan også sentrere elementer på siden og tilpasse elementposisjonene via CSS.

Rellax forteller deg ikke hvordan du strukturerer siden eller hvordan du definerer CSS-elementer på siden din. Alt det gjør er å skape 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 levende 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 bare en rask melding til laget.