Płynne przewijanie całej strony za pomocą wtyczki jQuery viewScroller.js

Efekty przewijania JavaScript już od wielu lat można wybierać spośród dziesiątek wspaniałych bibliotek. Ale nowym zawodnikiem w tej dziedzinie jest viewScroller.js.

Ta bardzo mała, ale potężna biblioteka może zostać zbudowana układy jednostronicowe że przewiń jako bloki jednym ruchem kółka przewijania (lub touchpada). Tworzy to kontrolowany układ, w którym przewijanie przenosi użytkownika przez poszczególne sekcje strony za pomocą precyzja pikseli.

Oczywiście jest to całkowicie darmowa biblioteka dostępne na GitHub i łatwy w instalacji z Bower lub npm.

Jednak viewScroller.js jest nie niezależna biblioteka JavaScript. Opiera się na jQuery i dwóch specyficznych wtyczkach: jQuery Mousewheel i JQuery Easing. To są oba wymagane aby efekty przewijania działały prawidłowo.

Może to utrudnić wartość viewScroller, ponieważ wymaga tylko kilku bibliotek JS do działania. Ale jeśli i tak już korzystasz z jQuery, to jest to oczywiste. viewScroller.js oferuje najprostszą metodę uzyskania przewijana aplikacja internetowa na jedną stronę działa bez większego kodu.

To jednak robi, używaj bardzo szczegółowych klas i identyfikatorów aby utworzyć efekt przewijania. Możesz edytuj te klasy w swoim własnym pliku CSS lub nadpisać je w kodzie podstawowym. Znajdziesz pełna lista na stronie repo za pomocą nazwy klas i domyślne dane konfiguracji.

Najprostszym sposobem na rozpoczęcie jest klonowanie demonstracji viewScroller. Mają jedną z prawym paskiem bocznym, drugą z lewym paskiem bocznym i jedną z dwoma pasami bocznymi umieszczonymi na środku.

Jeśli jesteś zadowolony z aplikacji internetowej opartej na jQuery, wtedy viewScroller jest fantastyczną darmową biblioteką do użycia. Potrzebuje sporo zależności ale nie powinny być trudne do skonfigurowania.

Rzuć okiem na demo na żywo i zobacz, co myślisz. Jeśli lubisz UX i zachowanie przewijania, postępuj zgodnie z przewodnik konfiguracji na GitHub zaczynać.