Glatt helbladsrulling med jQuery Plugin viewScroller.js

JavaScript rulleffekter har eksistert i årevis med dusinvis av flotte biblioteker å velge mellom. Men en ny konkurrent i feltet er viewScroller.js .

Dette svært små, men kraftige biblioteket kan bygge enkelsidige layouter som rulle som blokker med en sveipe av rullehjulet (eller berøringsplaten). Dette skaper en kontrollert layout hvor ruller flytter brukeren gjennom individuelle deler av en side med pikselstramt presisjon .

Naturligvis er dette et helt gratis bibliotek tilgjengelig på GitHub og enkelt å installere med Bower eller npm .

ViewScroller.js er imidlertid ikke et uavhengig JavaScript-bibliotek . Den stole på jQuery og to spesifikke plugins: jQuery Mousewheel og jQuery Easing . Disse er begge nødvendig for å få rulleffekter å fungere skikkelig.

Dette kan hemme verdien av viewScroller siden det krever noen JS-biblioteker bare for å fungere. Men hvis du allerede bruker jQuery, så er det en no-brainer. viewScroller.js tilbyr den enkleste metoden for å få en enkeltscrolling webapp som kjører uten mye kode.

Det bruker imidlertid svært detaljerte klasser og IDer for å lage rullingseffekten. Du kan redigere disse klassene i din egen CSS-fil eller overskrive dem i basekoden. Du finner en fullstendig liste på reposiden med klassenavn og standardoppsettdata .

Den enkleste måten å starte på er å klone ViewScroller-demoene . De har en med en høyre sidebar, en annen med en venstre sidebar, og en med to sidebarer som smelter innhold i midten.

Hvis du er ok med en jQuery-fueled web app, så er ViewScroller et fantastisk gratis bibliotek å bruke. Det trenger ganske mange avhengigheter, men de burde ikke være vanskelig å konfigurere.

Ta en titt på live-demoen og se hva du synes. Hvis du liker UX og rulleadferd, følg du oppsettveiledningen på GitHub for å komme i gang.