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 enkeltsideoppsett at bla som blokker med en sveipe av rullehjulet (eller berøringsplaten). Dette skaper et kontrollert layout hvor ruller flytter brukeren gjennom individuelle deler av en side med pikseltett presisjon.

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

Men viewScroller.js er ikke et uavhengig JavaScript-bibliotek. Den stole på jQuery og to spesifikke plugins: jQuery Mousewheel og jQuery Easing. Disse er begge nødvendige for å få rulleffekterne til å fungere skikkelig.

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

Det gjør imidlertid, bruk svært detaljerte klasser og IDer for å opprette rullingseffekten. Du kan rediger disse klassene i din egen CSS-fil eller overskrive dem i basekoden. Du finner en full liste på repo siden med klassenavn og standard oppsett data.

Den enkleste måten å starte er på kloning av viewScroller-demoene. De har en med en høyre sidebar, en annen med en venstre sidebar, og en med to sidebarer som smelter innholdet 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 demo og se hva du synes. Hvis du liker UX og scroll-oppførselen, følg deretter installasjonsveiledning på GitHub å komme i gang.