Glatt helbladsrullning med jQuery Plugin viewScroller.js

JavaScript-rullningseffekter har funnits i många år med dussintals stora bibliotek att välja på. Men en ny tävlande på fältet är viewScroller.js.

Detta mycket lilla men ändå kraftfulla bibliotek kan bygga enkelsidiga layouter den där bläddra som block med ett svep av rullhjulet (eller pekplattan). Detta skapar en kontrollerad layout där rullar flyttar användaren genom enskilda delar av en sida med pixel-tight precision.

Naturligtvis är detta ett helt gratis bibliotek tillgänglig på GitHub och lätt att installera med Bower eller npm.

Men viewScroller.js är inte ett oberoende JavaScript-bibliotek. Det är beroende av jQuery och två specifika plugins: jQuery Mousewheel och jQuery Easing. Dessa är båda krävs för att få rullningseffekterna att fungera korrekt.

Detta kan hämma värdet på viewScroller eftersom det kräver att några JS-bibliotek bara fungerar. Men om du redan använder jQuery så är det ingen brainer. viewScroller.js erbjuder den enklaste metoden för att få en webbsökning med enkel sidor köra utan mycket kod.

Det gör dock, använd mycket detaljerade klasser och id för att skapa rullningseffekten. Du kan redigera dessa klasser i din egen CSS-fil eller skriva över dem i baskoden. Du hittar en full lista på repo sidan med klassnamn och standardinställningsdata.

Det enklaste sättet att börja är med kloning av viewScroller demos. De har en med en höger sidofält, en annan med en vänster sidofält och en med två sidofält som smörjer innehåll i mitten.

Om du är okej med en jQuery-fueled webapp så är ViewScroller ett fantastiskt gratis bibliotek att använda. Det behöver ganska få beroenden men de borde inte vara svåra att konfigurera.

Ta en titt på live-demo och se vad du tycker. Om du gillar UX och rullningsbeteendet följer du sedan installationsguide på GitHub för att starta.