Hladké rolovanie na celej stránke s pluginom jQuery viewScroller.js

Ovládacie efekty jazyka JavaScript sú už roky s desiatkami veľkých knižníc, z ktorých si môžete vybrať. Ale nový kandidát na poli je viewScroller.js.

Táto veľmi malá, ale výkonná knižnica môže stavať rozloženie jednej strany že posúvať ako bloky pomocou jedného posunutia posúvacieho kolieska (alebo touchpadu). Tým sa vytvorí riadené usporiadanie, kde sa posúva posúva používateľ cez jednotlivé časti stránky presnosť pixelov.

Samozrejme, je to úplne bezplatná knižnica k dispozícii na GitHub a ľahko sa inštaluje s Bower alebo npm.

Avšak, viewScroller.js je nie nezávislá knižnica JavaScript. To sa spolieha na jQuery a dva špecifické pluginy: jQuery Mousewheel a jQuery Easing. Toto sú oba sú povinné aby efekty posúvania fungovali správne.

To môže obmedziť hodnotu zobrazenia skriptov, pretože vyžaduje niekoľko knižníc JS, ktoré jednoducho fungujú. Ale ak už používate jQuery, potom je to nevýrazný. viewScroller.js ponúka najjednoduchšiu metódu na získanie scrolling webovej aplikácie s jedinou stránkou beží bez veľkého kódu.

Robí to však, používať veľmi podrobné triedy a ID na vytvorenie rolovania. Môžeš upraviť tieto triedy vo vašom vlastnom súbore CSS alebo prepísať ich v základnom kóde. Nájdete tu a úplný zoznam na repo stránke s názvy triedy a predvolené nastavenia.

Najjednoduchší spôsob, ako začať, je klonovanie ukážok zobrazenia skriptov. Majú jednu s pravou bočnou lištou, druhú s ľavým bočným pruhom a druhým s dvoma bočnými lištami, ktoré obsahujú v strede.

Ak ste v poriadku s webovou aplikáciou poháňanou jQuery, potom viewScroller je fantastická bezplatná knižnica na použitie. Potrebuje to pomerne málo závislostí ale nemali by byť ťažké konfigurovať.

Pozrite sa na živé demo a uvidíte, čo si myslíte. Ak sa vám páči správanie UX a posúvanie, postupujte podľa Sprievodca nastavením na GitHub začať.