Βιβλιοθήκες JavaScript για εφέ δροσεράς κύλισης

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

Όταν ένας χρήστης μετακινηθεί προς τα κάτω στην ιστοσελίδα σας, η ενέργεια μπορεί να σχεδιαστεί για να ενεργοποιήσει μια ποικιλία επιλογών κινούμενων σχεδίων όπως φαινόμενα εξασθένισης, θαμπάδα, 3D, παράλλαξη και πολλά άλλα. Υπάρχουν 25 βιβλιοθήκες JS που μπορούν να σας βοηθήσουν να επιτύχετε αυτό το είδος απάντησης στο σχεδιασμό του ιστότοπού σας.

Κάντε κύλιση στο Reveal

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

Εξαρτήσεις: καμία | Μέγεθος: 2.9kb | Αδεια: MIT

Aniview

Ένα plugin που συνεργάζεται με το Animate.CSS για να ενεργοποιήσει τα κινούμενα σχέδια μόνο όταν το στοιχείο σας μπαίνει σε προβολή.

Εξαρτήσεις: jQuery | Μέγεθος: 1kb | Αδεια: N / A

Fade Into View

Ένα plugin που προσθέτει το εφέ ξεθώριασης / εξόδου σε στοιχεία όταν εισέρχονται ή εξέρχονται από προκαθορισμένα παράθυρα προβολής.

Εξαρτήσεις: jQuery | Μέγεθος: 3.81kb | Αδεια: N / A

ΟΥΑΟΥ

Το WOW θα αποκαλύψει κινούμενα σχέδια Animate.css κατά την εκδήλωση κύλισης. Μπορείτε να ρυθμίσετε τη διάρκεια κινούμενων εικόνων, τις καθυστερήσεις, τις αντισταθμίσεις και τις επαναλήψεις απευθείας από τη σήμανση HTML, στη συνέχεια απλά καλέστε την κλάση του στοιχείου από το JS.

Εξαρτήσεις: Animate.css | Μέγεθος: 8.23kb | Αδεια: MIT

ScrollMagic

Αυτό το πρόσθετο θα εμφανίσει ένα εφέ «μαγικό» όταν ένας χρήστης μετακινηθεί στη σελίδα. Είναι ιδανικό για την κίνηση, την προσάρτηση ενός στοιχείου ή την εναλλαγή της κλάσης CSS, όλα βασισμένα στη θέση κύλισης. Το ScrollMagic μπορεί να συνεργαστεί με το GSAP και το VelocityJS για τη δημιουργία σκηνής κινούμενων εικόνων. Δείτε το πλήρες demos εδώ.

Εξαρτήσεις: jQuery, GSAP, Velocity.js | Μέγεθος: 16.9kb | Αδεια: MIT

jScrollability

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

Εξαρτήσεις: jQuery | Μέγεθος: 1.86kb | Αδεια: MIT

pushIn.js

Μια απλή βιβλιοθήκη για να προσθέσετε το φαινόμενο dolly-in ή push-in σε οποιοδήποτε στοιχείο που λειτουργεί όταν ένας χρήστης μετακινηθεί στη σελίδα. Είναι εύκολο να εφαρμοστεί: απλά προσθέστε τις παραμέτρους εκκίνησης, τερματισμού και ταχύτητας παραμέτρους δεδομένων στο στοιχείο HTML.

Εξαρτήσεις: κανένας | Μέγεθος: 4.94kb | Αδεια: N / A

Scrollissimo

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

Εξαρτήσεις: GreenShock TweenLite / TweenMax | Μέγεθος: 2.94kb | Αδεια: N / A

jQuery Προσχέδιο κύλισης κινούμενων εικόνων

Αυτό είναι ένα πρόσθετο jQuery για να προσθέσετε animation που ενεργοποιείται από το Viewport χρησιμοποιώντας το Greensock. Είναι εύκολο να ζωντανέψετε στοιχεία με χαλάρωση, μετασχηματισμό, κλίμακα, περιστροφή και 3D animations.

Εξαρτήσεις: jQuery, GreenShock | Μέγεθος: 14kb | Αδεια: GNU GPL

Circlr

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

Εξαρτήσεις: κανένας | Μέγεθος: 6.05kb | Αδεια: MIT

Scrollimator

Το Scrollimator θα σας δείξει τη θέση και την εξέλιξη κύλισης και θα επιστρέψει τις τιμές που μπορείτε να χρησιμοποιήσετε για να αλλάξετε τις κινούμενες εικόνες που συνδέονται με τη συμπεριφορά κύλισης του χρήστη. Υποστηρίζει κάθετη και οριζόντια κύλιση.

Εξαρτήσεις: κανένας | Μέγεθος: 37.7kb | Αδεια: N / A

Crossfade

Το Crossfade είναι ένα plugin για να προσθέσετε το φαινόμενο crossfade σε μια εικόνα. Η θολής επίδραση θα συνεχιστεί καθώς ο χρήστης μετακινηθεί προς τα κάτω.

Εξαρτήσεις: jQuery | Μέγεθος: 3.19kb | Αδεια: MIT

Εφέ μετακίνησης σελίδας

Αυτή είναι μια βιβλιοθήκη για τα εφέ πειραματικής σελίδας που δημιουργήθηκε από το CodyHouse. Χρησιμοποιεί velocitey.js κινούμενα σχέδια.

Εξαρτήσεις: jQuery, Velocity.js | Μέγεθος: 17.6kb | Αδεια: N / A

jquery.parallax-κύλιση

Αυτή η βιβλιοθήκη σας επιτρέπει να προσθέσετε ομαλή εφέ parallax στην κάθετη κύλιση σελίδας. Απλά εισάγετε jQuery και jquery.easing.1.3.js, στη συνέχεια προσθέστε το 'data-parallax' χαρακτηριστικό και προαιρετικά πατήματα στο στοιχείο σας για να προσαρμόσετε το εφέ.

Εξαρτήσεις: jQuery, jQuery.easing | Μέγεθος: 8.72kb | Αδεια: GNU GPL

parallax.js

Το Parallax.js είναι ένα απλό plugin που προσθέτει το φαινόμενο scrolling parallax, εμπνευσμένο από την ιστοσελίδα του Spotify.

Εξαρτήσεις: jQuery | Μέγεθος: 6.63kb | Αδεια: MIT

Enllax

Το Enllax είναι μια εξαιρετικά ελαφριά βιβλιοθήκη για χρήση στην εφαρμογή του εφέ parallax σε οποιοδήποτε στοιχείο κύλισης. Μπορείτε να ορίσετε στοιχεία φόντου ή προσκηνίου για να έχετε αποτέλεσμα hav ethis. Λειτουργεί τόσο για κάθετη όσο και για οριζόντια κύλιση.

Εξαρτήσεις: jQuery | Μέγεθος: 1.53kb | Αδεια: MIT

Blur σε κύλιση

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

Εξαρτήσεις: κανένας | Μέγεθος: 1.1kb | Αδεια: N / A

boxLoader

Το boxLoader είναι ένα απλό plugin για τη φόρτωση στοιχείων κατά την κύλιση σελίδας. Η παράμετρος που πρέπει να ρυθμίσετε είναι οι οδηγίες (x ή y), η θέση στο ποσοστό, η επίδραση και η διάρκεια.

Εξαρτήσεις: jQuery | Μέγεθος: 3.42kb | Αδεια: N / A

Μετακίνηση σε κλίση σελίδας

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

Εξαρτήσεις: jQuery | Μέγεθος: 1.5kb | Αδεια: GNU GPL

AhRelax

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

Εξαρτήσεις: jQuery | Μέγεθος: 1.6kb | Αδεια: MIT

Fancy Scroll

Εάν δείτε ποτέ το φαινόμενο κύλισης υπερχείλισης σε Android ή iOS, με αυτό το plugin μπορείτε τώρα να το εφαρμόσετε στον ιστότοπό σας. Μπορείτε να προσθέσετε μια κινούμενη εικόνα, είτε μια αναπήδηση είτε μια λάμψη, όταν ένας χρήστης φτάσει στην επάνω / κάτω πλευρά της σελίδας.

Εξαρτήσεις: jQuery | Μέγεθος: 2.64kb | Αδεια: GNU GPL

Εικόνα κύλισης εικόνας Parallax

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

Εξαρτήσεις: jQuery | Μέγεθος: 8.69kb | Αδεια: MIT

Rlsmooth

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

Εξαρτήσεις: jQuery | Μέγεθος: 1.95kb | Αδεια: MIT

Scrollme

Προσθέτει απλά εφέ στην κύλιση σελίδας, όπως κλίμακα, περιστροφή, μετάφραση και αλλαγή της αδιαφάνειας των στοιχείων. Είναι εύκολο να ρυθμίσετε: απλά εισάγετε το jQuery, αυτό το πρόσθετο και ρυθμίστε τις παραμέτρους κινούμενης εικόνας στη σήμανση του στοιχείου.

Εξαρτήσεις: jQuery | Μέγεθος: 5.45kb | Αδεια: N / A

Parallax ImageScroll

Αυτό το plugin σας επιτρέπει να δίνετε εφέ παράλλαξης σε οποιαδήποτε εικόνα στη σελίδα σας. Κάνει χρήση του μετασχηματισμού CSS3 για να κάνει το αποτέλεσμα να λειτουργήσει. Αυτό το πρόσθετο έχει υποστήριξη για το jQuery και την AMD.

Εξαρτήσεις: jQuery | Μέγεθος: 8.01kb | Αδεια: MIT