Vloeiend scrollen op volledige pagina met jQuery Plugin viewScroller.js

JavaScript-scrolleffecten bestaan al jaren met tientallen fantastische bibliotheken om uit te kiezen. Maar een nieuwe kanshebber in het veld is viewScroller.js .

Deze zeer kleine maar krachtige bibliotheek kan lay-outs voor één pagina maken die als blokken scrollen met één veeg van het scrollwiel (of touchpad). Dit creëert een gecontroleerde lay-out waarbij de gebruiker met schuifpijlen de gebruiker door individuele secties van een pagina beweegt.

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

ViewScroller.js is echter geen onafhankelijke JavaScript-bibliotheek . Het is afhankelijk van jQuery en twee specifieke plug-ins: jQuery Mousewheel en jQuery Easing . Dit zijn beide nodig om de scrolleffecten goed 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 ​​scrolle web-app met één pagina te laten draaien zonder veel code.

Het maakt echter gebruik van zeer gedetailleerde klassen en ID's om het scrolleffect te creëren. U kunt deze klassen bewerken in uw eigen CSS-bestand of ze overschrijven in de basiscode. Je vindt een volledige lijst op de repopagina met klasseenamen en standaard instellingsgegevens .

De eenvoudigste manier om te starten is door de viewScroller-demo's te klonen . Ze hebben een met een rechterzijbalk, een andere met een linkerzijbalk 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 nogal wat afhankelijkheden nodig, maar ze moeten niet moeilijk te configureren zijn.

Neem een ​​kijkje bij de live demo en zie wat je ervan vindt. Als je van de UX en het scrolgedrag houdt, volg dan de installatiehandleiding op GitHub om aan de slag te gaan.