Glat Fuldsidesrulning med jQuery Plugin viewScroller.js

JavaScript rulleeffekter har eksisteret i årevis med snesevis af store biblioteker at vælge imellem. Men en ny deltager i feltet er viewScroller.js.

Dette meget lille, men kraftfulde bibliotek kan bygge enkeltside layouts at rulle som blokke med en skrue på rullehjulet (eller touchpad). Dette skaber et kontrolleret layout, hvor ruller flytter brugeren gennem individuelle dele af en side med pixel-tæt præcision.

Naturligvis er dette et helt gratis bibliotek tilgængelig på GitHub og nem at installere med Bower eller npm.

Men viewScroller.js er ikke et uafhængigt JavaScript-bibliotek. Det stole på jQuery og to specifikke plugins: jQuery Mousewheel og jQuery Easing. Disse er begge kræves for at få scroll-effekterne til at fungere korrekt.

Dette kan hæmme værdien af ​​viewScroller, da det kræver et par JS-biblioteker, der bare skal fungere. Men hvis du allerede bruger jQuery alligevel så er det en no-brainer. viewScroller.js tilbyder den enkleste metode til at få en single page scrolling web app kører uden meget kode.

Det gør dog, brug meget detaljerede klasser og id'er for at oprette rullende effekt. Du kan rediger disse klasser i din egen CSS-fil eller overskrive dem i basen kode. Du finder en fuld liste på repo siden med klassenavne og standardopsætningsdata.

Den enkleste måde at starte er på kloning af viewScroller demoer. De har en med en højre sidebjælke, en anden med et venstre sidebjælke og en med to sidebjælker, der smelter ind i midten.

Hvis du er okay med en jQuery-fueled web app, så er ViewScroller et fantastisk gratis bibliotek at bruge. Det har brug for ganske få afhængigheder men de bør ikke være svære at konfigurere.

Tag et kig på live demo og se hvad du synes. Hvis du kan lide UX og rulleadfærd, følg derefter installationsvejledning på GitHub at komme i gang.