75 Εργαλεία κίνησης στο Web πρέπει να δοκιμάσετε
Η κίνηση είναι μία από αυτές τις τάσεις που έχει τα νύχια της σε διαδικτυακές διεπαφές. Η δημοτικότητά του κυμαίνεται, αλλά είναι πάντα εκεί κάπου, ως βασικό συστατικό σε οποιαδήποτε ιστοσελίδα.
Από τα μικροσκοπικά, μόλις ορατά, κλώστες φόρτωσης, σε ολόκληρες σελίδες μεταβάσεις όπως μια ταινία εμπειρία, η κινούμενη εικόνα φτάνει σε κάθε περιοχή των σχεδίων μας.
Για τους σχεδιαστές που επιθυμούν να ενσωματώσουν κινούμενα σχέδια, υπάρχει πληθώρα διαθέσιμων επιλογών. Από καθαρά διακοσμητικές μεταβάσεις που απλώς εμπλουτίζουν τις διεπαφές, με σημαντικά αποτελέσματα που βελτιώνουν τις εμπειρίες των χρηστών, η συλλογή μας καλύπτει εργαλεία που σας επιτρέπουν να δημιουργείτε κινούμενα σχέδια διαφόρων ζυγών και για διαφορετικούς σκοπούς. Εδώ είναι 75 plugins και βιβλιοθήκες που θα θελήσετε να ελέγξετε έξω? δεν θα τα χρησιμοποιήσετε κάθε φορά, αλλά το καθένα έχει μια ιδανική περίπτωση χρήσης, και μερικές θα χρησιμοποιήσετε ξανά και ξανά ...
1. Animate.css
Animate.css είναι μια θεμελιώδης βιβλιοθήκη με τακτοποιημένα κινούμενα σχέδια cross-browser που βασίζονται σε πολλές λύσεις. Από τα κλασικά bouncings και fadings μέχρι τις σύγχρονες ανατροπές και μοναδικά εφέ είναι σε θέση να καλύψει τις ανάγκες σχεδόν κάθε έργου.
2. Μαγικές κινήσεις
Μαγικές κινούμενες εικόνες επικεντρώνεται σε εξαιρετικά αποτελέσματα που δίνουν μια διασύνδεση μια ιδιαίτερη αίσθηση. Παρόλο που η βιβλιοθήκη δεν μπορεί να καυχηθεί για μια τεράστια ποικιλία, αρκεί να εμπλουτιστεί η εμπειρία του χρήστη.
3. Bounce.js
Bounce.js είναι μια μικρή παιδική χαρά όπου μπορείτε να διεξάγετε πειράματα με κινούμενα σχέδια με βάση το CSS. Απλά προσθέστε ένα στοιχείο και συντονίστε τις ρυθμίσεις για να ζήσετε όλα. Και στο τέλος, εξαγάγετε το αρχείο css.
4. AnijS
AnijS βοηθάει στον χειρισμό του κινούμενου κινήτρου με διαισθητικό τρόπο χρησιμοποιώντας απλές οδηγίες όπως Αν, On, Do, To. Το μεγάλο πράγμα είναι ότι είστε ευπρόσδεκτοι να χρησιμοποιήσετε τις δικές σας τάξεις ή ακόμα και το Animate.css (αναφέρθηκε νωρίτερα) για να δημιουργήσετε κάτι εκπληκτικό.
5. Snabbt.js
Snabbt.js είναι διάσημο για την ελάχιστη προσέγγιση που φέρνει γρήγορα κινούμενα σχέδια. Ζυγίζει μόλις 5kb. Ωστόσο, είναι σε θέση να δώσει οποιουδήποτε συστατικού μια ορατή ώθηση μεταφράζοντας, περιστρέφοντας, σμίκρυνση, κλιμάκωση ή αλλαγή μεγέθους του σχήματος.
6. Kute.js
Kute.js είναι μια μηχανή κινουμένων σχεδίων στερλίνας που προσφέρει εξαιρετική απόδοση. Είναι γρήγορη και συμβατή σε διαφορετικά προγράμματα περιήγησης, χάρη σε ένα σύνολο βιώσιμων εναλλακτικών λύσεων που χειρίζονται προγράμματα περιήγησης παλαιού τύπου. Έρχεται με πολλά πρόσθετα για να παρέχει ένα αποτελεσματικό περιβάλλον εργασίας.
7. Velocity.js
Velocity.js είναι μια μηχανή κινούμενων εικόνων που με την πρώτη ματιά μπορεί να φαίνεται μη αντιπροσωπευτική. Ωστόσο, το οπλοστάσιό του περιλαμβάνει όλους τους συνήθεις τύπους κινούμενων σχεδίων, όπως μορφοποίηση, βρόχο, χαλάρωση, κύλιση κλπ. Είναι γρήγορο και ανεξάρτητο από το jQuery.
8. Lazy Line Ζωγράφος
Οι κινήσεις των διαδρομών SVG γίνονται εύκολα με Lazy Line Ζωγράφος . Πάρτε το γραφικό σας έργο γραμμής από το Illustrator σε μορφή SVG και φορτώστε το στο μετατροπέα. Το τελευταίο θα δημιουργήσει ένα αρχείο jQuery που χειρίζεται τη διαδικασία κινούμενης εικόνας. Εάν είναι απαραίτητο, μπορείτε να κάνετε αλλαγές μέσα στον κώδικα.
9. SVG.js
SVG.js σας προσφέρει ένα διαισθητικό περιβάλλον όπου μπορείτε να χειριστείτε και να ζωντανέψετε τα αρχεία SVG. Είναι μικρό και ανεξάρτητο με καθαρή σύνταξη και ενοποιημένο API. Κάνετε ό, τι θέλετε: ζωντανέψτε το μέγεθος, το χρώμα, τη θέση, τις διαδρομές κειμένου. μετασχηματισμό στοιχείων? δεσμεύουν γεγονότα κ.λπ.
10. Κίνηση UI
Σε αντίθεση με τα προηγούμενα παραδείγματα, Κίνηση UI έχει το πλεονέκτημα του SASS να δημιουργήσει ενδιαφέρουσες κινήσεις CSS. Υπάρχει μια ολόκληρη σειρά προκαθορισμένων μεταβάσεων και επιδράσεων που μπορούν να εφαρμοστούν σε οποιοδήποτε στοιχείο HTML. Όλα λειτουργούν σε όλα τα δημοφιλή προγράμματα περιήγησης εκτός από το IE9.
11. Περιμένετε! Εμψυχος
Περιμένετε! Εμψυχος σας επιτρέπει να λειτουργείτε καθυστερήσεις και να περιμένετε σε κινούμενα σχέδια με έναν απλό τρόπο. Υπολογίστε όλα τα απαιτούμενα χρονικά διαστήματα μέσω του μικρού πλαισίου και δημιουργήστε ένα φυσικό κινούμενο σχέδιο χωρίς θόρυβο.
12. Dynamics.js
Dynamics.js είναι μια τροφοδοτούμενη από τη JavaScript βιβλιοθήκη που προσφέρει 9 τυποποιημένα εφέ με τα οποία μπορείτε να παίξετε. Μπορείτε να καθορίσετε τη διάρκεια, τη συχνότητα, την τριβή, το μέγεθος της πρόβλεψης και την δύναμη πρόβλεψης για την επίτευξη κινούμενων εικόνων βασισμένων στη φυσική.
13. Choreographer.js
Με Choreographer.js στα χέρια σας δεν θα πρέπει να φοβάστε περίπλοκα κινούμενα σχέδια, αφού αυτή η βιβλιοθήκη JavaScript κάνει όλη τη βαριά ανύψωση. Παρόλο που ασχολείται με περιορισμένο αριθμό κινούμενων σχεδίων, σας επιτρέπει να εργαστείτε με προσαρμοσμένες λειτουργίες, ώστε να μπορείτε να δημιουργήσετε τα δικά σας αριστουργήματα.
14. Anime.js
Έρχεται με ένα εντυπωσιακό σύνολο χαρακτηριστικών που επιτρέπει την αλυσίδα πολλαπλών κινούμενων εικόνων, το συγχρονισμό διαφορετικών περιπτώσεων, γραμμών σχεδίασης, αντικειμένων μορφοποίησης, οικοδόμησης ατομικών κινούμενων σχεδίων κτλ. Μηχανή κίνησης JavaScript θα σας εκπλήξει με τις δυνατότητές της.
15. Mo.js
Mo.js σημαίνει κίνηση του Ιστού. Είναι απίστευτα γρήγορο και ταυτόχρονα διαισθητικό και απλό. Δημιουργήστε ενδιαφέροντα μονοπάτια, απρόσμενες μεταβάσεις τρόπων διαλόγου, διατάξεις φυσαλίδων, κινούμενα σχέδια και πολλά άλλα.
16. Sequence.js
Sequence.js είναι ένα πλαίσιο που βασίζεται στο CSS για τη δημιουργία κινούμενων γραφικών με δυνατότητα άμεσης επαφής. Είναι ιδανικό για τη δημιουργία διαφανειών, παρουσιάσεων, banners και άλλων δυναμικών στοιχείων. Μεταξύ των πολλών σχεδίων πριμοδότησης θα βρείτε ένα δωρεάν που σας παρέχει μια προσωπική άδεια ανοιχτού κώδικα.
17. Shifty
Εύστροφος είναι ένας κινητήρας tweening με μεγάλη έμφαση στη βελτιστοποίηση, γρήγορη απόδοση, ευελιξία και δυνατότητα επέκτασης. Θεωρείται ότι αποτελεί μια βιώσιμη εναλλακτική λύση για το GreenSock ακόμη με πολύ απλούστερη διεπαφή.
18. Είναι Τρίτη
Τρίτη είναι μια αυτόνομη βιβλιοθήκη κινουμένων σχεδίων που μπορεί να χρησιμοποιηθεί σε συνδυασμό με άλλες βιβλιοθήκες. Κάνει τις εισόδους και τις εξόδους να φαίνονται ομαλές, λεπτές και κομψές. Προσφέρει μια ποικιλία τυποποιημένων εφέ, όπως ξεθωριάσεις, επεκτάσεις, συρρικνώσεις, drop-ins κλπ.
19. CSS Animate
CSS Animate είναι μια πρωτόγονη παιδική χαρά που δημιουργεί έναν έγκυρο κώδικα χωρίς κωδικό για κάθε τακτική κινούμενη εικόνα. Ορισμός ονόματος, κλάσης, ιδιότητες κινούμενης εικόνας, ιδιότητες πλαισίου. χειριστείτε τη χρονική γραμμή και προσθέστε δείκτες: με μία λέξη, προσαρμόστε όλα όσα χρειάζεστε για να δημιουργήσετε μια κανονική κινούμενη εικόνα βασισμένου σε βασικό πλαίσιο.
20. Vivus.js
Ναυτιλία με τρεις τύπους κινούμενων εικόνων: καθυστέρηση, συγχρονισμό και αποκάλυψη μία προς μία, Vivus.js θα σχεδιάσει ένα SVG με έναν ομαλό και φυσικό τρόπο, κάνοντας την εμφάνιση του στοιχείου μια υπέροχη εμπειρία. Μπορείτε να πάτε για προκαθορισμένες κινήσεις ή να χρησιμοποιήσετε τις δικές σας προσαρμοσμένες λειτουργίες.
21. Bonsai.js
Bonsai.js είναι μια βιβλιοθήκη JavaScript για προηγμένους χειρισμούς γραφικών. Έχει ένα αρκετά απλό renderer API και SVG. Χρησιμοποιήστε τον ηλεκτρονικό επεξεργαστή του για να δώσετε μια δοκιμαστική μονάδα δίσκου, να εξοικειωθείτε με τη σύνταξη και ακόμα να κατεβάσετε ορισμένα δείγματα για να ξεκινήσετε.
22. GSAP από την GreenSock
GSAP είναι μια ισχυρή πλατφόρμα animation που στοχεύει σε επαγγελματικά κινούμενα σχέδια. Έχει πολλά πρόσθετα και βοηθητικά προγράμματα που είναι υπεύθυνα για διάφορους τύπους κινούμενων σχεδίων. Αποτελείται από BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, κλπ.
23. Popmotion
Popmotion είναι μια άλλη ελαφριά και πρακτική εναλλακτική λύση στο Greensock στη συλλογή μας. Πρόκειται για μια μηχανή κίνησης με πλήρη έλεγχο σε κάθε πλαίσιο. Έχει μια προηγμένη tween, ανάμειξη χρωμάτων και μια δέσμη λειτουργιών και δράσεων για την κατασκευή πολύπλοκων λύσεων.
24. Tween.js
Πολλά απίστευτα πράγματα γίνονται με τη βοήθεια του Tween.js . Πρόκειται για μια υπερσύγχρονη μηχανή tweening με πολλές παραμέτρους για τον έλεγχο της κίνησης. Είναι επίσης μια εξαιρετική λύση για την ενίσχυση έργων που οδηγούνται από το Three.js.
25. Hover.css
Hover.css «η βιβλιοθήκη μπορεί να χωριστεί σε διάφορες βασικές κατηγορίες: 2D μεταβάσεις, μεταβάσεις φόντου, κινούμενες εικόνες, μεταβάσεις στα σύνορα, μεταβάσεις σκιάς και λάμψης, φυσαλίδες ομιλίας και μπούκλες. Εφαρμόστε αυτά τα αποτελέσματα σε οποιοδήποτε στοιχείο του σχεδίου σας χωρίς περιορισμούς.
26. Διαμετακόμιση
Ο κατάλογος των χαρακτηριστικών του Διαμετακόμιση είναι μάλλον σύντομη, ωστόσο περιλαμβάνει τα πιο σημαντικά πράγματα για την κατασκευή μετασχηματισμών 2D και 3D. Για παράδειγμα, μπορείτε να καθορίσετε τις καθυστερήσεις και τις διάρκειες, να προσθέσετε τη λειτουργία χαλάρωσης, να χρησιμοποιήσετε σχετικές τιμές και πολλά άλλα.
27. Πύραυλος
Ρουκέτα είναι μια λύση για την εξισορρόπηση της κίνησης ενός αντικειμένου από το ένα σημείο στο άλλο. Υπάρχουν 8 ειδικά εφέ όπως η παλμική κίνηση ή η περιστροφή που δίνουν σε αυτό το ταξίδι μια όμορφη αίσθηση .
28. Animo.js
Animo.js είναι ένα σχετικά μικρό εργαλείο για να έχετε μια λαβή στις μεταβάσεις και τα κινούμενα σχέδια. Διαθέτει ένα σύνολο επιπλέον plugins όπως αντίστροφη μέτρηση, περιστροφή και ζωντάνια που εμπλουτίζουν τη βιβλιοθήκη και διευκολύνουν την επίτευξη του επιθυμητού αποτελέσματος.
29. Shift.css
Shift.css είναι ένα πλαίσιο για την δημιουργία κινούμενων εικόνων μέσα σε ένα κοντέινερ που επηρεάζει τόσο τα ένθετα όσο και τα προσαρμοστικά στοιχεία. Υπάρχουν 15 τύποι προτύπων κινούμενων σχεδίων, όπως η μετακίνηση, η είσοδος, η έξοδος, η πτώση και κάποια άλλα.
30. CSShake
CSShake έρχεται με 11 τάξεις που αναγκάζουν τα στοιχεία του DOM σας να τινάζουν. Μπορείτε να επιλέξετε κατεύθυνση (οριζόντια ή κάθετη), να πληκτρολογήσετε (σταθερή, τρελή, σταθερή, κομμάτι), ένταση (αργή ή σκληρή) ή απλά να πάτε για μια προεπιλεγμένη επιλογή.
31. Σαφράν
Αν προτιμάτε να χρησιμοποιείτε mixins για να χειρίζεστε εύκολα και γρήγορα animations και μεταβάσεις Κρόκος είναι σίγουρα για σας. Είναι μια συλλογή επαναχρησιμοποιούμενων μεθόδων που γράφονται στο Sass όπου μπορείτε να ορίσετε μεταβλητές και παραμέτρους.
32. CSSynth
CSSynth είναι ένας μικρός επεξεργαστής όπου μπορείτε να απολαύσετε την ομορφιά του συγχρονισμού. Η κινούμενη εικόνα βασίζεται σε μια σειρά τετραγώνων, τον αριθμό των οποίων μπορείτε να ορίσετε στον αριστερό πίνακα. Επιλέξτε ένα εφέ, ρυθμίστε καθυστέρηση και επιλέξτε αν θέλετε να κάνετε λήψη του κώδικα αποτελεσμάτων σε μορφή CSS ή SCSS.
33. Ceaser
Ceaser είναι ένα παλιό, δοκιμασμένο για το χρόνο εργαλείο για τη διεξαγωγή πειραμάτων με την κλασική κιθάρα χαλάρωσης. Υπάρχει μια σειρά παραλλαγών ξεκινώντας από γραμμική και τελειώνοντας με την προσαρμοσμένη. Δύο πρόσθετες παράμετροι (διάρκεια και αποτέλεσμα) θα βοηθήσουν στην τελειοποίηση του αποτελέσματος.
34. Morf.js
Για να πάρετε το παραπάνω εργαλείο λίγο περισσότερο, μπορείτε να δοκιμάσετε Morf.js . Προσφέρει μεταβάσεις που βασίζονται σε προσαρμοσμένες λειτουργίες χαλάρωσης. Υπάρχουν σχεδόν 40 προκαθορισμένες επιλογές που μπορείτε να προσαρμόσετε γρήγορα στο έργο σας.
35. Voxel.css
Voxel.css δημιουργήθηκε ειδικά για 3D απεικονίσεις. Η απλή υλοποίησή του επιτρέπει ακόμη και στους αρχάριους να αποκτήσουν την κατανόηση του 3D CSS. Η βιβλιοθήκη διαθέτει 4 σημαντικές κατηγορίες: Scene, World, Editor και Voxel που βοηθούν στη δημιουργία παιχνιδιών και στην απόλαυση της δράσης.
36. Repaintless.css
Repaintless.css χρησιμοποιεί την τεχνική FLIP για να κάνει τα κινούμενα σχέδια γρήγορα και ομαλά. Παρόλο που απαιτούνται κάποιες βελτιώσεις. Παρόλα αυτά, είναι ένα τέλειο ξεκίνημα για εκείνους που δίνουν ιδιαίτερη προσοχή στην απόδοση.
37. MixItUp
Ανακάτεψέ το είναι μια βιβλιοθήκη για τον καλλωπισμό φιλτραρίσματος, διαλογής, εισαγωγής και άλλων ενεργειών προεπιλογής που είναι εγγενείς στις πλειονότητές διεπαφές όπως είναι τα χαρτοφυλάκια, οι γκαλερί κλπ. Είναι μια εξάρτηση και υπόσχεται να παρέχει υψηλό επίπεδο απόδοσης.
38. Wallop
Όπως αναφέρει ο τίτλος, Δυνατό χτύπημα είναι για την επίδειξη και την απόκρυψη των πραγμάτων με ευχάριστο τρόπο. προβλέψιμα, η γενική του χρήση έγκειται στην κατασκευή ρυθμιστικών. Ωστόσο, κανείς δεν σας εμποδίζει να εκμεταλλευτείτε τις δυνατότητές του και δημιουργώντας κάτι ενδιαφέρον και ενδιαφέρουσα.
39. Ramjet
Είδος αεριωθούμενης μηχανής μετατρέπει ένα στοιχείο σε άλλο με την ψευδαίσθηση της κίνησης που πραγματοποιείται μέσω της λειτουργίας χαλάρωσης. Είναι ικανός να συνεργάζεται με στοιχεία DOM, SVG, στατικές εικόνες ή κινούμενες εικόνες.
40. jQuery DrawSVG
Βασισμένο σε έναν ισχυρό μηχανισμό κίνησης jQuery, αντλεί αποτελεσματικά όλα τα μονοπάτια μέσα στο SVG δίνοντας στην εικόνα μια δραματική και ταυτόχρονα κομψή είσοδο. Η διαδικασία είναι απλή: προσθέστε το plugin στη σελίδα, να την αρχικοποιήσετε και να εκτελέσετε την κινούμενη εικόνα.
41. Animatic.js
Animatic.js είναι μια μεγάλη λύση cross-browser με ενσωματωμένους κανόνες φυσικής που χρησιμοποιεί μετασχηματισμούς CSS, τρισδιάστατους μετασχηματισμούς και JavaScript για να φέρνουν τα πάντα στη ζωή. Κύριο καθήκον του είναι να μειώσει τις προσπάθειές σας για την κίνηση πολλών αντικειμένων ταυτόχρονα. Μπορείτε να δημιουργήσετε παράλληλες και διαδοχικές κινούμενες εικόνες προσαρμόζοντας προσεκτικά τη διάρκεια, την καθυστέρηση και τη λειτουργία χαλάρωσης.
42. Move.js
Move.js είναι ένα υπερπροσαρμοσμένο εργαλείο για τη δημιουργία τακτικών κινούμενων εικόνων, όπως η κλιμάκωση, η κλίση, η μετακίνηση ή η μετάφραση. Κάθε κινούμενη εικόνα μπορεί να βελτιωθεί με την κλασική λειτουργία ευκολίας.
43. Eg.js
Π.χ. είναι μια προσεκτικά συναρμολογημένη συλλογή διαφόρων επιδράσεων και δυναμικών στοιχείων που στοχεύουν στην ενίσχυση των αλληλεπιδράσεων στις διεπαφές. Υπάρχουν 8 ισχυρά στοιχεία που ταξινομούν βασικές εργασίες και 6 κύριες μεθόδους και συμβάντα για άλλους σκοπούς.
44. GFX
GFX είναι μια συναρπαστική τρισδιάστατη βιβλιοθήκη κινουμένων σχεδίων για την δημιουργία κινούμενων εικόνων CSS3 με προγραμματισμό. Λειτουργεί με το jQuery, καθιστώντας πολύ πιο εύκολη την παραγωγή του επιθυμητού αποτελέσματος. Μπορείτε να παίξετε με κλιμάκωση, περιστροφή, μετάφραση, σκάλισμα, και κάποια άλλα πράγματα.
45. Stylie
Παρόλο που λέγεται αυτό Stylie είναι ένα εργαλείο για διασκέδαση, αλλά σίγουρα θα σας εντυπωσιάσει με τις δυνατότητές του. Το κέντρο ελέγχου διαθέτει 4 καρτέλες που σας επιτρέπουν να συντονίζετε τα βασικά καρέ, τη χαλάρωση, τις επιλογές εξαγωγής και την HTML, καθιστώντας τα σύνθετα κινούμενα σχέδια εύκολη στη χρήση.
46. Iconate.js
Iconate.js εισάγει τη ζωή σε μετασχηματισμούς των εικόνων, ενισχύοντας τη μετάβαση μεταξύ δύο αντικειμένων με ένα ευχάριστο συνοδευτικό αποτέλεσμα. Λειτουργεί εξαιρετικά όχι μόνο με το Font Awesome, αλλά και με τους Glyphicons και ακόμη και το δικό σας προσαρμοσμένο σύνολο εικονογραμμάτων.
47. AnimateMate
AnimateMate είναι ένα μικρό εργαλείο για την παραγωγή και την εξαγωγή κινούμενων εικόνων μικρής κλίμακας από το περιβάλλον Sketch. Δεν είναι κάτι φανταχτερό, αλλά σας επιτρέπει να παίζετε με τα βασικά καρέ, να προσθέτετε λειτουργίες χαλάρωσης, ακολουθίες ελέγχου και άλλα.
48. CAAT
CAAT (που σημαίνει Canvas Advanced Animation Toolkit) είναι ένα στερλίνα που πλαισιώνει ένα πανίσχυρο παράλληλο με το JavaScript. Το σετ εργαλείων του περιλαμβάνει σκηνές, τεχνολογίες πολλαπλών προβολών, μάσκες περικοπής, πρότυπο πακέτο συμπεριφορών κλπ.
49. Granim.js
Granim.js είναι μια μικροσκοπική βιβλιοθήκη JavaScript για την επικάλυψη διεπαφών με διαδραστικά με βάση το γραφικό περιβάλλον. Μπορεί να είναι μια τυπική κινούμενη κίνηση με ακτινική κλίση, δυναμικές κλίσεις που εφαρμόζονται πάνω από το φόντο της εικόνας ή κινούμενες κλίσεις σε συνδυασμό με μάσκες εικόνας.
50. Animista
Δημιουργήθηκε από την Ana Travas, Animista είναι μια παιδική χαρά για την εκτέλεση πειραμάτων με μια δέσμη συμβατικών και ασυνήθιστων προκαθορισμένων κινούμενων εικόνων CSS. Επιλέξτε τη διάρκεια, τη λειτουργία χρονισμού, την καθυστέρηση, τον αριθμό επαναλήψεων και κάποιες άλλες επιλογές για να εξετάσετε το αποτέλεσμα.
51. Obnoxious.css
Obnoxious.css έρχεται με 5 μοναδικά κινούμενα σχέδια που βασίζονται στο CSS και αναγκάζουν τα στοιχεία της διασύνδεσης να ανακινδυνεύουν, να στρίβουν, να μεγεθύνουν, να μιμούνται την επίδραση strobe ή να αλλάζουν το βάρος της γραμματοσειράς. Το μόνο που χρειάζεται να κάνετε είναι να εφαρμόσετε την προτιμώμενη τάξη στο επιθυμητό div.
52. Animatelo
Animatelo περιλαμβάνει έναν τόνο εντυπωσιακών δυναμικών εφέ που δανείστηκαν από το διάσημο και ισχυρό Animate.css, παρέχοντας έναν ευκολότερο τρόπο για την εφαρμογή τους. Χάρη στο polyfill API Animations API υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης.
53. Foxholder
Αλεξιπτωτιστής είναι ένα πακέτο 15 ωραίων μικροσκοπικών εφέ που δημιουργήθηκαν ειδικά για τη βελτίωση των αλληλεπιδράσεων του χρήστη με τη φόρμα. Κάθε μέθοδος υπογραμμίζει το πεδίο εισόδου με τον δικό της τρόπο: μπορεί να κάνει τα περιθώρια φωτεινότερα, να προσθέσει οπτικές ενδείξεις, να θέσει σε κίνηση κείμενο και πολλά άλλα.
54. Rhythm.js
Rhythm.js είναι όλα σχετικά με παιχνιδιάρικα ντίσκο-εμπνευσμένα μικροσκοπικά κινούμενα σχέδια. Αυτή η βιβλιοθήκη JavaScript περιλαμβάνει αποτελέσματα που μιμούνται κάποιες κινήσεις χορού. Υπάρχουν σχεδόν 20 επιλογές που θα προσθέσουν boogie-woogie στην ιστοσελίδα σας.
55. Colorido.js
Όπως το Granim.js, αυτό το plugin που λειτουργεί με JavaScript δημιουργήθηκε για να χειριστεί την ιδιότητα χρώματος. Βοηθάει στη δυναμική αλλαγή των τόνων και της αδιαφάνειας του φόντου και του κειμένου, καθώς και στη δημιουργία μη στατικών ακτινικών, γραμμικών, διαγώνιων και οριζόντιων κλίσεων.
56. Barba.js
Barba.js αξιοποιεί το PJAX (μια τεχνική που βασίζεται σε ajax) για να απαλλάξει τους χρήστες από τη λεγόμενη σκληρή εναλλαγή μεταξύ των σελίδων. Απλώς κρύβει το παλιό δοχείο και δείχνει το νέο δοχείο με λεπτό τρόπο.
57. ScrollReveal.js
ScrollReveal.js είναι ένα δημοφιλές εργαλείο για τη δημιουργία κινούμενων εικόνων κύλισης. Με τη μέθοδο main reveal () μπορείτε να διαχειριστείτε διαφορετικά κινούμενα σχέδια και να ελέγξετε όλες τις τυπικές πτυχές τους. Το μεγάλο πράγμα είναι ότι λειτουργεί καλά με web και κινητά προγράμματα περιήγησης.
58. Scrollanim
Scrollanim είναι λιγότερο εξελιγμένο αλλά πιο εύχρηστο και απλούστερο εργαλείο αντί για το προηγούμενο παράδειγμα. Παρά το γεγονός ότι ευνοεί το CSS3, αλλά σας επιτρέπει να προσθέσετε κινούμενα σχέδια χρησιμοποιώντας το API JavaScript για να δημιουργήσετε κινούμενες εικόνες που ενεργοποιούνται με κύλιση. Έχει μια σειρά από προ-ενσωματωμένες λύσεις που μπορείτε να εισαγάγετε γρήγορα στο έργο σας.
59. ScrollTrigger
Ενώ οι δύο προηγούμενες λύσεις επικεντρώνονται κυρίως στην παραδοσιακή κάθετη κύλιση, αυτό είναι για την κατασκευή μεγάλων οριζόντιων ιστότοπων. Σας επιτρέπει να δημιουργήσετε δυναμικές διεπαφές στο επίπεδο του άξονα x, γεμάτες με όμορφα CSS3 κινούμενα σχέδια χρησιμοποιώντας μια μάλλον πρωτόγονη σύνταξη.
60. Force.js
Force.js είναι μια μικρή λύση που στερείται τεράστιας λειτουργικότητας και πλούτου των επιλογών. Ωστόσο, είναι ιδανικό για τακτικές εργασίες όπως η ρύθμιση αντικειμένων σε λεπτές κινήσεις ή ωραία κύλιση. Ως συνήθως, η χαλάρωση βρίσκεται στον πυρήνα του, καθιστώντας την κίνηση καθαρή και τακτοποιημένη.
61. AOS
AOS σημαίνει κινούμενο σε κύλιση. Κάνει αυτό που λέει - σας παρέχει μια δέσμη ζωντανών προκαθορισμένων αποτελεσμάτων που ενεργοποιούνται από ένα γεγονός κύλισης. Εάν θέλετε να δώσετε ενότητες μια δραματική είσοδο χωρίς να σκάβετε βαθιά σε κώδικα τότε είναι σίγουρα για σας.
62. Rellax
Rellax είναι για την όμορφη παραλλαξ. Πρόκειται για μια ελαφριά βιβλιοθήκη JavaScript της βανίλιας που δίνει μια λεπτή πινελιά 3D διάστασης στις διεπαφές.
63. Tilt.js
Tilt.js παράγει συναρπαστικό φαινόμενο κλίσης με παράλλαξη. Θα μετακινήσει αντικείμενα σε μια κεκλιμένη θέση που μιμείται το 3D σε ένα βασικό επίπεδο 2D. Μπορείτε να διορθώσετε έναν άξονα, κάνοντας το αποτέλεσμα πιο ελκυστικό και ενδιαφέρον, ή αναδημιουργώντας κάποιου είδους λάμψη ή επιπλέουσα αίσθηση.
64. Μετασχηματισμός-όταν
Μετασχηματισμός-όταν είναι μια εξαιρετική λύση για το σχεδιασμό εμπειριών αφήγησης με υψηλή απόδοση και εγγενή υποστήριξη για κινητές συσκευές. Στοιχηματίζει σε δύο βασικές παραμέτρους: τη θέση του χρόνου και τη μετακίνηση, κάνοντας έτσι την περιπέτεια του χρήστη μέσω της διασύνδεσης να ελέγχεται με προσοχή από την πλευρά σας. Λειτουργεί τόσο με τα SVG όσο και με τα κανονικά στοιχεία HTML.
65. CSS3 Animation
Αυτό είναι μια γεννήτρια παλαιού σχολείου με μια ζωντανή προεπισκόπηση για τη δημιουργία βασικών animations CSS3. Υπάρχει ένα τυπικό κέντρο ελέγχου στο οποίο μπορείτε να ρυθμίσετε τη διάρκεια της μετάβασης, τον αριθμό των επαναλήψεων, τις λειτουργίες χρονισμού κλπ. Η ρουτίνα είναι απλή: ρυθμίστε τα πάντα, αντιγράψτε τους προκύπτοντες κώδικες HTML και CSS και επικολλήστε τα στο έργο σας.
66. Curve.js
Curve.js αναπνέει τη ζωή σε γραμμές που τους καθιστούν "χορό" και γυρίζουν σαν κύμα. Χρησιμοποιήστε το για να δημιουργήσετε ένα αφηρημένο κομψό γεωμετρικό υπόβαθρο ή κεντρικά στοιχεία.
67. Animator.js
Animator.js λέγεται ότι είναι ευέλικτη, αποτελεσματική και ελαφριά. Προσφέρει τον ευκολότερο τρόπο διαχείρισης των βασικών καρέ και δημιουργίας κινούμενων εικόνων CSS διαφόρων ζυγών. Είναι επίσης εξάρτηση ελεύθερη.
68. Cel-animation
Cel-animation είναι ένα Sass mixin που σας δίνει τον έλεγχο των παραδοσιακών βασικών καρέ. Μπορείτε να ενεργοποιήσετε SVG ή οποιοδήποτε τύπο στοιχείων HTML.
69. Scrollissimo
Scrollismo δημιουργήθηκε για να συνεργαστεί με την Greensock επιδέξια και ο