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, parallax-elementen trek snel de aandacht.
Er zijn tal van gratis JavaScript-bibliotheken voor geanimeerde scrolleffecten maar velen zijn opgeblazen of gewoon te complex voor sommige mensen.
Dat is waarom ik aanbevelen Rellax.js voor uw parallaxbehoeften. Het is een gratis open source plug-in die is gebouwd op vanilla JavaScript, dus dat is het heeft geen afhankelijkheden.
Standaard is dit het vereist slechts een eenvoudige functieaanroep om de parallaxklasse toe te wijzen aan pagina-elementen. Vervolgens, tijdens het scrollen, deze elementen blijf gefixeerd en meebewegen met het gezichtspunt van de gebruiker.
U kunt deze elementen aanpassen om dichterbij, verder weg of achter pagina-elementen te verschijnen. Dit maakt de illusie van diepte op de pagina en het werkt allemaal via een 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 gericht op de .rellax klasse zoals zo:
var rellax = new Rellax ('. rellax'); Let op dat je vrij veel kunt gebruiken elke les die je wilt, maar het voorbeeld dat de demo gebruikt .rellax voor de eenvoud.
Vanaf hier ben je gewoon wikkel je parallax-elementen in in een div met de .rellax klasse en stel het snelheidskenmerk in. Dit werkt via de data-rellax-speed aangepast kenmerk dat waarden van -10 tot +10 accepteert.
Hier is een voorbeeldfragment van de HTML op de demopagina:
Ik ben extra traag en soepel
Je kan ook centrale elementen op de pagina en pas de elementposities aan via CSS.
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 creëer een natuurlijk parallax-scrolleffect met pure JavaScript. Hoe u dit gebruikt, is geheel aan u.
Om een te zien live demonstratie, neem een kijkje op de hoofdsite of blader 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-verzoeken in te dienen, dus als je problemen opmerkt of suggesties voor functies hebt, stuur dan snel een bericht naar het team.
