Rellax.js - Δωρεάν χαρακτηριστικά Parallax Χρησιμοποιώντας τη Βανίλια JavaScript

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

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

Γι 'αυτό συστήνω Rellax.js για τις ανάγκες των παραλλαγών σας. Είναι ένα δωρεάν open source plugin που βασίζεται σε βανίλια JavaScript, έτσι δεν έχει εξαρτήσεις.

Από προεπιλογή, αυτό απαιτεί μόνο μια απλή κλήση λειτουργίας για να εκχωρήσετε την κλάση parallax στα στοιχεία σελίδας. Στη συνέχεια, καθώς μετακινηθείτε, αυτά τα στοιχεία παραμείνετε σταθεροί και να προχωρήσουμε μαζί με την άποψη του χρήστη.

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

Όλος ο πηγαίος κώδικας Rellax είναι διαθέσιμος δωρεάν στο GitHub αν θέλετε να κατεβάσετε ένα αντίγραφο.

Ολόκληρη η ρύθμιση χρησιμοποιεί μία λειτουργία JS στοχεύοντας το .rellax όπως:

 var rellax = νέο Rellax ('rellax'); 

Σημειώστε ότι μπορείτε να χρησιμοποιήσετε λίγο πολύ κάθε τάξη που θέλετε, αλλά το παράδειγμα demo χρησιμοποιεί .rellax για λόγους απλότητας.

Από εδώ, απλά τυλίξτε τα στοιχεία παράλλαξής σας μέσα σε ένα div με το .rellax τάξη και ορίστε το χαρακτηριστικό ταχύτητας. Αυτό λειτουργεί μέσω του ταχύτητα δεδομένων-rellax προσαρμοσμένο χαρακτηριστικό το οποίο δέχεται τιμές από -10 έως +10.

Εδώ είναι ένα παράδειγμα απόσπασμα από τη HTML στη σελίδα επίδειξης:

 
 Είμαι πιο αργός και ομαλός 
 

Μπορείτε επίσης να κεντρικά στοιχεία στη σελίδα και προσαρμόστε τις θέσεις των στοιχείων μέσω CSS.

Το Rellax δεν σας λέει πώς να δομήσετε τη σελίδα ή πώς να ορίσετε στοιχεία CSS στη σελίδα σας. Το μόνο που κάνει είναι δημιουργήστε ένα φυσικό φαινόμενο scrolling paralax με καθαρό JavaScript. Ο τρόπος με τον οποίο χρησιμοποιείτε αυτό εξαρτάται αποκλειστικά από εσάς.

Για να δείτε ένα ζωντανή επίδειξη, ρίξτε μια ματιά στην κύρια τοποθεσία ή περιηγηθείτε στο GitHub repo. Αυτό περιλαμβάνει κάποια τεκμηρίωση, μαζί με συνδέσμους σε ζωντανές ιστοσελίδες που χρησιμοποιούν το Rellax.js.

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