Rellax.js - Gratis Parallax-functies met behulp van Vanilla JavaScript

Parallax scrollen ziet er ongelooflijk uit als het goed is gedaan. Het is geen functie die u op elke website wilt hebben, maar voor creatieve sites en bestemmingspagina's trekken parallaxelementen snel de aandacht .

Er zijn tal van gratis JavaScript-bibliotheken voor geanimeerde scrolling-effecten, maar velen zijn opgeblazen of gewoon te complex voor sommige mensen.

Dat is waarom ik Rellax.js aanbevelen voor uw parallaxbehoeften. Het is een gratis open source plug-in die is gebouwd op vanilla JavaScript, dus het heeft geen afhankelijkheden .

Standaard vereist dit slechts een eenvoudige functieaanroep om de parallaxklasse toe te wijzen aan pagina-elementen. Vervolgens blijven deze elementen tijdens het scrollen vast en bewegen ze mee met het gezichtspunt van de gebruiker.

U kunt deze elementen aanpassen om dichterbij, verder weg of achter pagina-elementen te verschijnen. Dit creëert de illusie van diepte op de pagina en het werkt allemaal via één eenvoudige JavaScript-bibliotheek.

Alle broncode van Rellax is gratis beschikbaar op GitHub als je een kopie wilt downloaden.

De hele installatie gebruikt een enkele JS-functie die is gericht op de .rellax- klasse, zoals:

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

Merk op dat je vrijwel elke klasse kunt gebruiken die je wilt, maar de voorbeeld-demo gebruikt .rellax omwille van de eenvoud.

Vanaf hier wikkelt u uw parallax-elementen in een div in met de .rellax klasse en stelt u het snelheidskenmerk in . Dit werkt via het custom data-rellax-speed waarbij waarden van -10 tot +10 worden geaccepteerd.

Hier is een voorbeeldfragment van de HTML op de demopagina:

 Ik ben extra traag en soepel 

U kunt ook elementen op de pagina centreren en de elementposities via CSS aanpassen .

Rellax vertelt u niet hoe u de pagina moet structureren of hoe u CSS-elementen op uw pagina moet definiëren. Het enige dat het doet is een natuurlijk parallax-scrolleffect creëren met pure JavaScript. Hoe u dit gebruikt, is geheel aan u.

Als u een live demo wilt bekijken, neemt u een kijkje op de hoofdsite of bladert u door de GitHub-repo. Dit omvat enige documentatie, samen met koppelingen naar live websites met behulp van Rellax.js.

En het beste van alles is dat het team voortdurend bereid is om pull-aanvragen in te dienen, dus als je problemen opmerkt of suggesties hebt voor functies, stuur dan een snel bericht naar het team.