Ομαλή κύλιση πλήρους σελίδας με πρόσθετο jQuery viewScroller.js

Επεξεργασία εφέ JavaScript έχουν περάσει εδώ και χρόνια με δεκάδες μεγάλες βιβλιοθήκες να επιλέξουν από. Αλλά ένας νέος υποψήφιος στο γήπεδο είναι viewScroller.js.

Αυτή η πολύ μικρή αλλά ισχυρή βιβλιοθήκη μπορεί να χτίσει μονόγραμμα σελίδες ότι μετακινηθείτε ως μπλοκ με ένα κτύπημα του τροχού κύλισης (ή touchpad). Αυτό δημιουργεί μια ελεγχόμενη διάταξη, όπου οι κύλινδροι μετακινούν τον χρήστη μέσω μεμονωμένων τμημάτων μιας σελίδας σφιχτή ακρίβεια pixel.

Φυσικά, αυτή είναι μια εντελώς δωρεάν βιβλιοθήκη διαθέσιμη στο GitHub και εύκολο στην εγκατάσταση με Bower ή npm.

Ωστόσο, το viewScroller.js είναι δεν μια ανεξάρτητη βιβλιοθήκη JavaScript. Βασίζεται στο jQuery και σε δύο συγκεκριμένα πρόσθετα: jQuery Mousewheel και jQuery Easing. Αυτά είναι και τα δύο για να λειτουργούν σωστά τα εφέ κύλισης.

Αυτό μπορεί να παρεμποδίσει την τιμή του viewScroller, καθώς απαιτεί λίγες βιβλιοθήκες JS μόνο για να λειτουργήσει. Αλλά αν χρησιμοποιείτε ήδη jQuery ούτως ή άλλως, τότε είναι ένα μη-brainer. viewScroller.js προσφέρει την απλούστερη μέθοδο για να πάρετε ένα μεμονωμένη εφαρμογή κύλισης διαδικτυακής σελίδας χωρίς πολλούς κώδικες.

Το κάνει όμως, χρησιμοποιήστε πολύ λεπτομερείς κατηγορίες και αναγνωριστικά στοιχεία για να δημιουργήσετε το εφέ κύλισης. Μπορείς επεξεργασία αυτών των τάξεων στο δικό σας αρχείο CSS ή αντικαταστήστε τα στον βασικό κώδικα. Θα βρείτε ένα πλήρη λίστα στη σελίδα επαναγοράς με ονόματα κλάσεων και προεπιλεγμένα δεδομένα εγκατάστασης.

Ο απλούστερος τρόπος για να ξεκινήσετε είναι με την κλωνοποίηση των demos viewcroll. Έχουν ένα με μια δεξιά πλαϊνή μπάρα, μια άλλη με μια αριστερή πλάγια γραμμή και μία με δύο πλευρικές ράβδους που περιστρέφουν περιεχόμενο στο μέσον.

Αν είστε εντάξει με μια εφαρμογή web jQuery που τροφοδοτείται με τροφοδοσία, τότε το ViewScroller είναι μια φανταστική ελεύθερη βιβλιοθήκη που μπορείτε να χρησιμοποιήσετε. Χρειάζεται μερικές εξαρτήσεις αλλά δεν πρέπει να είναι δύσκολο να ρυθμιστούν.

Ρίξτε μια ματιά στο ζωντανή επίδειξη και δείτε τι σκέφτεστε. Αν σας αρέσει η συμπεριφορά UX και η κύλιση ακολουθήστε το οδηγός εγκατάστασης στο GitHub για να ξεκινήσετε.