10 καλύτερες ελεύθερες βιβλιοθήκες ψυχαγωγίας για το διαδίκτυο
Η κίνηση είναι μια από τις βασικές τάσεις για το 2018, αλλά δεν χρειάζεται να επανεφεύρετε τον τροχό για να προσθέσετε κίνηση στους ιστότοπούς σας. Παρακολουθούμε τις καλύτερες δωρεάν βιβλιοθήκες κινούμενων σχεδίων για έργα ιστού.
Μπορείτε να δημιουργήσετε μερικά τρελά πράγματα με Ετικέτες UI στο δίκτυο. Αυτό γίνεται γρήγορα ο κανόνας για τις σύγχρονες ιστοσελίδες όπου η εμπλοκή του χρήστη είναι μεγάλη υπόθεση.
Αν κοιτάξετε γύρω θα βρείτε πολλές γεννήτριες κώδικα και προσαρμοσμένα εργαλεία για να βοηθήσετε με την κινούμενη εικόνα. Αλλά μπορείτε επίσης να βρείτε δωρεάν βιβλιοθήκες που θα σας εξοικονομήσουν χρόνο στη διαδικασία κωδικοποίησης.
Αυτές είναι οι 10 επιλογές μου για τις καλύτερες βιβλιοθήκες κινούμενων γραφικών ανοιχτού κώδικα. Αυτό περιλαμβάνει έναν καλό συνδυασμό βιβλιοθηκών JavaScript και κινούμενων εικόνων μόνο CSS. Και τα δύο στυλ είναι μεγάλα και και τα δύο έχουν τα δικά τους οφέλη και τα μειονεκτήματά τους.
Είτε σίγουρα εγγυώμαι ότι αυτή η λίστα θα έχει κάτι που θα αγαπήσετε.
1. GSAP
ο Βιβλιοθήκη GSAP είναι ένας από τους πιο cool ελεύθερους πόρους που διατίθενται για τους προγραμματιστές. Τρέχει καθαρά JavaScript και είναι μία από τις πιο ισχυρές βιβλιοθήκες κινούμενων εικόνων που μπορείτε να χρησιμοποιήσετε.
Λειτουργεί πάνω από τις προδιαγραφές HTML5 και παίζει ωραία με όλα τα σύγχρονα προγράμματα περιήγησης, για να μην αναφέρουμε ότι η ομάδα ενημερώνει συνεχώς αυτή τη βιβλιοθήκη με νέα χαρακτηριστικά. Μπορεί να λειτουργήσει με SVG, στοιχεία καμβά, ή ακόμα και αντικείμενα jQuery μαζί με άλλες σχετικές βιβλιοθήκες όπως EaselJS .
Σίγουρα αξίζει να εξεταστεί αν χρειάζεστε μια ισχυρή βιβλιοθήκη animation web. Αυτό μπορεί να χειριστεί απλές εργασίες, αλλά υπάρχουν πολλές μικρότερες βιβλιοθήκες εκεί έξω που μπορείτε να δοκιμάσετε για αυτές.
2. Anime.js
Όταν βρήκα την πρώτη Anime.js βιβλιοθήκη ήμουν έτοιμος. Αυτό το πράγμα είναι απίστευτα ισχυρό και ξεπερνά τα απλά animations UI / UX.
Με το Anime.js μπορείτε να σχεδιάσετε αισθητικά κινούμενα σχέδια με λογότυπα, κουμπιά, εικόνες, τα ονομάζετε. Αυτό υποστηρίζει όλους τους τυπικούς ενεργοποιητές χρηστών όπως τα κλικ / αιωτήσεις / swipes και έχετε πρόσβαση σε ένα σωρό προσαρμοσμένες κινούμενες εικόνες.
Αν ρίξετε μια ματιά την τεκμηρίωση μπορείτε να βρείτε πραγματικά μια δέσμη των παραδειγμάτων ενσωματωμένα στη σελίδα. Πλέον υπάρχει ένα συλλογή στο CodePen γεμάτο από παραδείγματα Anime.js για να το διαβάσετε.
3. Wicked CSS
Εδώ είναι μια από τις νεότερες βιβλιοθήκες με έμφαση στον καθαρό κώδικα CSS. Κακό CSS λειτουργεί πάνω από τις ιδιότητες του CSS3 για να προσφέρει μερικά πολύ απίστευτα αποτελέσματα.
Από την κύρια σελίδα θα βρείτε ένα σωρό live demos που μπορείτε να δοκιμάσετε στο πρόγραμμα περιήγησης. Αυτές περιλαμβάνουν περιστροφές αντικειμένων, ανατροπές, διαφάνειες και πολλά παρόμοια εφέ κίνησης.
Κάποια από αυτά μπορεί να είναι αρκετά απλά που θα μπορούσατε να τα κατασκευάσετε μόνοι σας. Αλλά άλλοι παίρνουν πραγματικά περίπλοκο και αυτό κάνει τη βιβλιοθήκη Cick Wicked τόσο διασκεδαστική να παίξει με.
4. Κινήστε CSS
Ίσως ο οριστικός πόρος για την διαδικτυακή ζωτικότητα είναι Animate.css . Αυτή η βιβλιοθήκη ανοιχτού κώδικα κυκλοφόρησε αρκετά χρόνια πίσω και είναι ακόμα πιο σχετική από ποτέ.
Ο δημιουργός Daniel Eden δημιούργησε αυτό το έργο ως έναν απλοποιημένο τρόπο προσθήκης προσαρμοσμένων κινούμενων γραφικών CSS3 σε μια ιστοσελίδα. Με τα χρόνια έχει εξελιχθεί σε μια πλήρης βιβλιοθήκη animation με αρκετή ισχύ για να τρέξει σε οποιοδήποτε μεγάλο έργο.
Η αρχική σελίδα προσφέρει πολλές επιδείξεις για να δοκιμάσετε τα στυλ κινούμενων σχεδίων και να δείτε τι σκέφτεστε. Επιπλέον υπάρχει μια δέσμη εξαιρετικής τεκμηρίωσης στο GitHub συμπεριλαμβανομένης μιας λίστας κατηγοριών και ορισμένων παραδειγμάτων αποσπασμάτων κώδικα.
5. Τρίτη
Το ένα πράγμα που μου αρέσει περισσότερο Τρίτη είναι η απλότητα αυτών των κινούμενων εικόνων. Με αυτή τη βιβλιοθήκη μπορείτε να ελέγξετε τον τρόπο εμφάνισης και εξαφάνισης των στοιχείων από τη σελίδα.
Αλλά αυτά τα κινούμενα σχέδια δεν είναι υπερβολικά λαμπερά. Αντ 'αυτού πακέτο μια ωραία λεπτή γροθιά που βελτιώνει πραγματικά την αισθητική της σελίδας, αλλά δεν μειώνει το περιεχόμενο ή την εμπειρία του χρήστη.
Δεν έχω δει πολλές ιστοσελίδες χρησιμοποιώντας την Τρίτη αλλά είναι ίσως η καθαρότερη βιβλιοθήκη εκεί έξω.
Τρέχει σε καθαρό CSS και τα στυλ κινουμένων σχεδίων είναι τόσο εύθραυστα. Μπορούν να συνδυαστούν με οποιαδήποτε τοποθεσία και έχετε πάνω από μια ντουζίνα ξεθωριάζει / ξεθωριάζει στυλ για να συνεργαστείτε με.
6. CSShake
Έχω ακόμα να δω κάποια βιβλιοθήκη CSS ως διασκέδαση ή παράξενο CSShake . Αυτό είναι ένα κομμάτι τρελό και ένα μέρος μοναδικό έτσι πιθανότατα δεν θα ταιριάζει με κάθε ιστοσελίδα.
Ο λόγος που έγινε η λίστα είναι επειδή δεν μπορώ να σκεφτώ κάποια παρόμοια βιβλιοθήκη με αυτά τα χαρακτηριστικά. Με το CSShake μπορείτε να μεταφέρετε τα κινούμενα σχέδια με αιχμηρά αποτελέσματα από όλα τα είδη στυλ, όλα τα οποία τρέχουν σε καθαρό CSS.
Από τις ήπιες κινήσεις μέχρι την έντονη ανάδευση και τα πάντα μεταξύ τους, αυτή η βιβλιοθήκη έχει τα πάντα με μια αρκετά εύκολη εγκατάσταση για εκκίνηση.
7. Mo.js
Από τις πολλές λεπτομερείς βιβλιοθήκες JavaScript για κινούμενα σχέδια που έχω να πω Mo.js είναι ένα από τα καλύτερα. Αυτή η βιβλιοθήκη είναι τεράστια και είναι πραγματικά σχεδιασμένη για ΚΙΝΟΥΜΕΝΑ ΓΡΑΦΙΚΑ πάνω από animations UI / UX.
Αλλά μπορείτε να το χρησιμοποιήσετε για οτιδήποτε αν μάθετε πώς λειτουργεί. Οι κώδικες είναι πολύ απλοί να χειριστούν και υπάρχει ένα μάτσο μαθήματα μπορείτε να ακολουθήσετε για να διευκολύνετε τη ζωή σας.
Είναι αυτή η τέλεια βιβλιοθήκη animation; Μετά βίας.
Ωστόσο, έχει πολλά εκπληκτικά χαρακτηριστικά και απλοποιεί πραγματικά τη διαδικασία κινούμενων εικόνων, είτε κινούμαστε με μια πλοήγηση με Navbar, ένα λογότυπο ή κάποιο άλλο πολύπλοκο αντικείμενο.
8. Ζωντανέψτε το Plus
Για μια εξαιρετικά ελαφριά βιβλιοθήκη κινούμενων εικόνων εύκολης ευκολίας ελέγξτε έξω Animate Plus . Αυτό ζυγίζει μόνο 2KB όταν minfied και έχει όλα τα βασικά χαρακτηριστικά που θα περιμένατε με προσαρμοσμένη JavaScript animation.
Αυτό είναι εύκολο να εγκατασταθεί με npm και μπορείτε να το ρυθμίσετε ακολουθώντας τα αποσπάσματα κώδικα στο GitHub. Τα περισσότερα από αυτά είναι απλώς βασικά demos, ώστε να μην μπαίνουν σε κάτι περίπλοκο, αλλά μπορείτε να βρείτε όλες τις επιλογές και τις μεθόδους callback ακριβώς στο GitHub.
Ρίξε μια ματιά αυτό το demo δείγμα τράβηξε κατευθείαν από το απόσπασμα κώδικα στην κύρια επαναγορά. Δεν είναι πολύ, αλλά θα σας δείξει πώς να ρυθμίσετε το Animate Plus και να εκτελέσετε λίγο κωδικό προεπιλογής από το μηδέν.
9. Bounce.js
Με Bounce.js μπορείτε να κάνετε δυνατά CSS3 και JS κινούμενα σχέδια με μερικά μόνο κλικ.
Στην αρχική σελίδα θα βρείτε ένα προσαρμοσμένο εργαλείο δημιουργίας κινούμενων σχεδίων με την πρώτη εστίαση στις ενότητες. Με αυτόν τον τρόπο μπορείτε να προσθέσετε τις συγκεκριμένες λειτουργίες κινούμενης εικόνας που θέλετε στη σελίδα χωρίς να προσθέσετε επιπλέον κωδικό.
Η μεγαλύτερη διαφορά με το Bounce.js είναι ότι δεν λειτουργεί ως βιβλιοθήκη. Παρόλο που μπορείτε να βρείτε πληροφορίες εγκατάστασης στο GitHub , δεν είναι μόνο ένα βασικό σενάριο. Στην πραγματικότητα έρχεται με ένα web builder έτσι Bounce είναι μία από τις λίγες βιβλιοθήκες animation που μπορείτε να stylize στο πρόγραμμα περιήγησής σας.
10. Μαγεία
Διασκεδαστικά κινούμενα σχέδια με μια χαρά του παιχνιδιού περιγράφει καλύτερα Μαγεία βιβλιοθήκη.
Αυτή η ολόκληρη συλλογή επικεντρώνεται σε κινούμενα σχέδια CSS3 ενώ ταυτόχρονα πιέζει προσαρμοσμένα στυλ που δεν μπορούν να βρεθούν αλλού. Είναι μια αρκετά μεγάλη συλλογή των κωδικών CSS3 και θα βρείτε πολλά καθαρά κόλπα και εδώ. Οι περιστροφές, οι προοπτικές στροφές, τα φαινόμενα εξασθένισης, η αφθονία των περισσοτέρων.
Αν κοιτάξετε το σελίδα επίδειξης μπορείτε να δείτε κάποια από αυτά τα αποτελέσματα στη δράση.
Η χορήγηση αυτής της βιβλιοθήκης εξακολουθεί να είναι πολύ μικρότερη από άλλες βιβλιοθήκες CSS3, ώστε να μην μπορεί να ανταγωνιστεί την Τρίτη ή το Animate.css. Αλλά έχει πολλά καθαρά διαδικτυακά κινούμενα σχέδια που απλά δεν θα βρείτε σε άλλες βιβλιοθήκες.
