Rellax.js - Gratis Parallax Funktioner Använda Vanilla JavaScript

Parallax rullning ser otroligt ut när det är gjort rätt. Det är inte en funktion du vill ha på alla webbplatser, men för kreativa platser och målsidor, parallaxelement ta snabb uppmärksamhet.

Det finns massor av gratis JavaScript-bibliotek för animerade rullningseffekter men många är uppblåst eller bara för komplexa för vissa människor.

Det är därför jag rekommenderar Rellax.js för dina parallax behov. Det är en gratis öppen källkod plugin byggd på vanilj JavaScript, så det har inga beroenden.

Som standard är det kräver bara ett enkelt funktionssamtal att tilldela parallaxklassen till sidelement. Då, som du rullar, dessa element stanna fast och gå vidare med användarens synvinkel.

Du kan anpassa dessa element för att visas närmare, längre bort eller bakom sidelement. Detta skapar illusion av djupet på sidan och allt fungerar via ett enkelt JavaScript-bibliotek.

Alla Rellax källkod finns gratis på GitHub om du vill ladda ner en kopia.

Hela installationen använder en enda JS-funktion riktade mot .rellax klass som så:

 var rellax = ny Rellax ('rellax'); 

Observera att du kan använda ganska mycket vilken klass du vill ha, men exemplet demo använder .rellax för enkelhetens skull.

Härifrån, du bara vikla dina parallaxelement inuti en div med .rellax klass och Ange hastighetsattributet. Detta fungerar genom data rellax-hastighet anpassat attribut som accepterar värden från -10 till +10.

Här är en exemplarbit från HTML på demo-sidan:

 
 Jag är extra långsam och smidig 
 

Du kan också centrala element på sidan och Anpassa elementpositionerna via CSS.

Rellax berättar inte hur du strukturerar sidan eller hur du definierar CSS-element på din sida. Allt det gör är skapa en naturlig parallax rullning effekt med ren JavaScript. Hur du använder det här är helt upp till dig.

För att se en live-demo, ta en titt på huvudsidan eller bläddra igenom GitHub repo. Detta inkluderar viss dokumentation, tillsammans med länkar till levande webbplatser med hjälp av Rellax.js.

Och bäst av allt är laget ständigt villigt att ta dragförfrågningar, så om du märker några problem eller har förslag på funktioner, skicka bara ett snabbt budskap till laget.