Rellax.js - Gratis Parallax Funktioner Brug Vanilla JavaScript

Parallax scrolling ser utroligt ud, når det er gjort rigtigt. Det er ikke en funktion, du vil have på alle hjemmesider, men for kreative websteder og destinationssider, parallax elementer tag hurtigt opmærksomhed.

Der er masser af gratis JavaScript-biblioteker til animerede rullende effekter men mange er oppustet eller bare for komplekse for nogle mennesker.

Derfor anbefaler jeg Rellax.js til din parallax behov. Det er et gratis open source plugin bygget på vanille JavaScript, så det har ingen afhængigheder.

Som standard er det kræver kun et simpelt funktionsopkald at tildele parallax-klassen til sideelementer. Så, som du ruller, disse elementer ophold fast og bevæge sig sammen med brugerens synspunkt.

Du kan tilpasse disse elementer til at vises tættere, længere væk eller bag sideelementer. Dette skaber illusion af dybde på siden, og det hele virker gennem et enkelt JavaScript-bibliotek.

Alle Rellax kildekoden er gratis tilgængelige på GitHub, hvis du vil downloade en kopi.

Hele opsætningen bruger en enkelt JS-funktion målrettet mod .rellax klasse som sådan:

 var rellax = ny rellax ('rellax'); 

Bemærk, at du kan bruge temmelig meget enhver klasse du vil have, men eksemplet demoen bruger .rellax for enkelhedens skyld.

Herfra er du bare Indpak din parallax elementer inde i en div med .rellax klasse og Indstil hastighedsattributten. Dette virker gennem data-rellax-hastighed brugerdefineret attribut, der accepterer værdier fra -10 til +10.

Her er en Eksempeluddrag fra HTML på demo-siden:

 
 Jeg er ekstra langsom og glat 
 

Du kan også centrale elementer på siden og tilpasse elementpositionerne via CSS.

Rellax fortæller dig ikke hvordan du strukturerer siden eller hvordan du definerer CSS elementer på din side. Alt det gør er Opret en naturlig parallax rullende effekt med rent JavaScript. Hvordan du bruger dette er helt op til dig.

For at se en live demo, tag et kig på hovedstedet eller gennemse GitHub repo. Dette omfatter nogle dokumentation sammen med links til live websites ved hjælp af Rellax.js.

Og bedst af alt er holdet hele tiden villig til at tage pull-anmodninger, så hvis du bemærker nogen problemer eller har forslag til funktioner, send kun en hurtig besked til teamet.