Vloeiend scrollen op volledige pagina met jQuery Plugin viewScroller.js

JavaScript-schuifeffecten bestaat al jaren met tientallen grote bibliotheken om uit te kiezen. Maar een nieuwe kanshebber in het veld is viewScroller.js.

Deze zeer kleine maar krachtige bibliotheek kan bouwen lay-outs van één pagina dat scrol als blokken met één veeg van het scrollwiel (of touchpad). Hiermee maakt u een gecontroleerde lay-out waarbij de gebruiker door de afzonderlijke delen van een pagina wordt verplaatst met schuifbewegingen pixeldichte precisie.

Uiteraard is dit een volledig gratis bibliotheek beschikbaar op GitHub en eenvoudig te installeren met Bower of npm.

ViewScroller.js is dat echter wel niet een onafhankelijke JavaScript-bibliotheek. Het is afhankelijk van jQuery en twee specifieke plug-ins: jQuery Mousewheel en jQuery Easing. Dit zijn beide vereist om de scroll-effecten naar behoren te laten werken.

Dit kan de waarde van viewScroller belemmeren omdat het enkele JS-bibliotheken vereist om te functioneren. Maar als je jQuery al gebruikt, dan is dat een goed idee. viewScroller.js biedt de eenvoudigste methode om een een pagina scrollen web app draaien zonder veel code.

Het doet het echter wel, gebruik zeer gedetailleerde klassen en ID's om het scrolleffect te creëren. Jij kan bewerk deze klassen in uw eigen CSS-bestand of overschrijf ze in de basiscode. Je zult een vinden volle lijst op de repopagina met klassenamen en standaard instellingsgegevens.

De eenvoudigste manier om te starten is door klonen van de viewScroller-demo's. Ze hebben een met een rechterzijbalk, een andere met een zijbalk aan de linkerkant en een met twee zijbalken met inhoud in het midden.

Als je het goed vindt met een web-app met jQuery, dan is viewScroller een fantastische gratis bibliotheek om te gebruiken. Het heeft wel nodig nogal wat afhankelijkheden maar ze moeten niet moeilijk te configureren zijn.

Neem een ​​kijkje op de live demonstratie en zie wat je denkt. Als je van de UX en het scrolgedrag houdt, volg dan de installatiehandleiding op GitHub starten.