Δημιουργήστε τα αποτελέσματά σας κύλισης με τη σελίδα Roll.js

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

Αλλά τι γίνεται κωδικοποιώντας τα δικά σας αποτελέσματα κύλισης? Ή τι γίνεται αν θέλετε απλώς έναν απλό τρόπο ανίχνευσης πόσο μακριά βρίσκεται η σελίδα που έχει μετακινηθεί ένας χρήστης?

Το Roll.js είναι η βιβλιοθήκη που αναζητάτε. Αυτό το σενάριο ανοιχτού κώδικα είναι τρελό μικρό και εξαιρετικά εύκολο στη χρήση. Μπορείτε να πάρετε αυτό το έργο με μερικές γραμμές JavaScript. Και το καλύτερο από όλα δεν σας αναγκάζει να εκτελέσετε κάτι συγκεκριμένο, αλλά μάλλον σας δίνει τα εργαλεία για να δημιουργήσετε τις δικές σας προσαρμοσμένες λειτουργίες κύλισης.

Ο στόχος αυτής της βιβλιοθήκης είναι να βοηθήσει τους προγραμματιστές να διαρθρώσουν τα αποτελέσματα κύλισης χωρίς μεγάλη προσπάθεια.

Εάν ρίξετε μια ματιά στο κύριο GitHub repo θα βρείτε έναν ολόκληρο οδηγό ρύθμισης με μερικά παραδείγματα παραδειγμάτων. Μπορείς για να ορίσετε πόσο μακριά θα μετακινηθεί ο χρήστης, ή σε διαφορετικά “υαλοπίνακες” στη σελίδα.

Αυτά λειτουργούν καλύτερα σε διατάξεις μιας σελίδας, αλλά μπορείτε να χρησιμοποιήσετε το Roll.js για τόσα πολλά.

Με μια κλήση μίας λειτουργίας μπορείτε να τραβήξετε δεδομένα με κάθε κύλιση που περιλαμβάνει:

• Συνολικά βήματα σελίδας (αν υπάρχουν).
• Σύνολο% μετακινηθεί προς τα κάτω της σελίδας.
• Τρέχουσα θέση στη σελίδα σε εικονοστοιχεία.
• Συνολικό ύψος προβολής βάσει του μεγέθους της συσκευής.

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

Αλλά μπορείτε να βρείτε πολλά από αυτά τα χαρακτηριστικά και σε άλλες βιβλιοθήκες. Τι κάνει το Roll.js τόσο ξεχωριστό?

Μέρος της είναι η σύνταξη, αλλά ο μεγάλος πωλητής εδώ είναι το συνολικό μέγεθος της βιβλιοθήκης 8KB όταν εξομαλύνεται. Αυτό είναι πολύ κακό για μια τόσο λεπτομερή βιβλιοθήκη κύλισης!

Μπορείτε να δείτε πώς λειτουργεί αυτό στην κύρια σελίδα επίδειξης και μπορείτε ακόμη και κατεβάστε τον πηγαίο κώδικα του Roll.js για να ανακαλύψετε τους ίδιους τους δικούς σας.

Όλα από τα live demos και τα αρχεία ακατέργαστης βιβλιοθήκης μπορούν να τραβηχτούν από το GitHub και είναι εξαιρετικά εύκολο να εργαστούν.

Αλλά εάν έχετε οποιεσδήποτε ερωτήσεις, προτάσεις ή θέλετε να μοιραστείτε τις ευχαριστίες σας για την εκπληκτική βιβλιοθήκη, μπορείτε να τραβήξετε ένα μήνυμα προς τον δημιουργό @williamngan.