Γνωρίζατε ότι πριν από το 1999 οι προγραμματιστές και οι σχεδιαστές ιστού περιορίζονταν μόνο σε προγράμματα αναπαραγωγής Flash και gif όποτε ήθελαν να κάνουν κινούμενα στοιχεία σε ιστοσελίδες; Ιδιότητες κινούμενων εικόνων όπως τα εφέ αιώρησης εισήχθησαν με την κυκλοφορία του CSS3 στα τέλη της δεκαετίας του 1990.
Τώρα έχουμε πολλές ιδιότητες κινούμενων εικόνων που μπορούν να χρησιμοποιήσουν οι προγραμματιστές ιστού για να δημιουργήσουν οπτικά ελκυστικές ιστοσελίδες. Τα καλά νέα είναι ότι μπορείτε να παραλείψετε τη δημιουργία ιδιοτήτων κινούμενων εικόνων από την αρχή εάν έχετε πρόσβαση σε διάφορες βιβλιοθήκες κινούμενων εικόνων.
Οι βιβλιοθήκες CSS Animation είναι μπλοκ κώδικα ή προκατασκευασμένες συλλογές κινούμενων εικόνων και εφέ CSS που μπορείτε να προσθέσετε στις ιστοσελίδες σας για οπτική ελκυστικότητα. Μπορείτε να προσθέσετε αυτά τα προσχεδιασμένα εφέ κίνησης σε διάφορα στοιχεία όπως κείμενο, εικόνες και βίντεο στις ιστοσελίδες σας.
Πίνακας περιεχομένων
Γιατί να χρησιμοποιήσετε τις βιβλιοθήκες κινούμενων σχεδίων CSS;
- Εξοικονομήστε χρόνο: Το στυλ μπορεί να είναι χρονοβόρο, πράγμα που σημαίνει λιγότερο χρόνο για να αξιοποιήσετε τη λειτουργικότητα. Ευτυχώς, οι βιβλιοθήκες κινούμενων εικόνων CSS έχουν προκατασκευασμένα στοιχεία, που σημαίνει ότι δεν χρειάζεται να δημιουργήσετε τα πάντα από την αρχή.
- Συνεπές στυλ: Καθώς η εφαρμογή σας μεγαλώνει, πρέπει να διασφαλίζετε σταθερό στυλ. Οι βιβλιοθήκες κινούμενων εικόνων μπορούν να βοηθήσουν στην επίτευξη σταθερού στυλ στις ιστοσελίδες σας.
- Εύκολη προσαρμογή: Παρόλο που αυτές οι βιβλιοθήκες έχουν κάποιο κωδικό boilerplate, μπορείτε να προσθέσετε νέα στοιχεία, να διαγράψετε ορισμένα στοιχεία ή ακόμα και να αλλάξετε χρώματα και γραμματοσειρές για να ταιριάζουν στις ανάγκες σας.
- Είναι βελτιστοποιημένες: Οι σύγχρονοι τελικοί χρήστες μπορούν να περιηγηθούν σε ιστότοπους μέσω διαφορετικών συσκευών και προγραμμάτων περιήγησης. Τα πρότυπα κώδικα από τις περισσότερες βιβλιοθήκες κινούμενων σχεδίων CSS είναι βελτιστοποιημένα για διαφορετικά μεγέθη οθόνης και προγράμματα περιήγησης.
Αυτές είναι μερικές από τις καλύτερες βιβλιοθήκες CSS Animation που μπορείτε να δοκιμάσετε σήμερα.
Animate.css
Το Animate.css είναι μια έτοιμη προς χρήση βιβλιοθήκη κινούμενων σχεδίων που μπορείτε να χρησιμοποιήσετε στο επόμενο έργο σας στον ιστό. Είναι μια καταπληκτική επιλογή για να τονίσετε ορισμένα στοιχεία και να δημιουργήσετε συμβουλές, ρυθμιστικά και αρχικές σελίδες που καθοδηγούν την προσοχή.
Βασικά χαρακτηριστικά
- Εύκολο στη χρήση: Απλώς πρέπει να προσθέσετε αυτήν τη βιβλιοθήκη μέσω CDN ή να την εγκαταστήσετε χρησιμοποιώντας διαχειριστές πακέτων όπως το Yarn ή το NPM για να αρχίσετε να τη χρησιμοποιείτε.
- Έχει πολλά πρότυπα: Η αρχική σελίδα έχει τόνους προτύπων που μπορείτε να δοκιμάσετε προτού μπορέσετε να τα συμπεριλάβετε στο έργο σας.
- Συμβατό με JavaScript: Μπορείτε να προσθέσετε διαδραστικότητα στο Animate.css συνδυάζοντάς το με JavaScript.
Το Animate.css είναι μια δωρεάν βιβλιοθήκη ανοιχτού κώδικα.
Animista
Το Animista είναι μια βιβλιοθήκη κινούμενων σχεδίων CSS κατά παραγγελία. Ως προγραμματιστής/σχεδιαστής ιστού, μπορείτε να δοκιμάσετε, να προσαρμόσετε και να επιλέξετε προσχεδιασμένα κινούμενα σχέδια που σας ταιριάζουν.
Χαρακτηριστικά
- Εύκολα προσβάσιμο: Αφού εντοπίσετε ένα κινούμενο σχέδιο που ταιριάζει στο έργο σας, μπορείτε να το αντιγράψετε και να το επικολλήσετε στο αγαπημένο σας ή να κάνετε λήψη ενός αρχείου στον τοπικό σας υπολογιστή.
- Κατηγοριοποιημένα κινούμενα σχέδια: Τα προσχεδιασμένα κινούμενα σχέδια έχουν κατηγοριοποιηθεί για εύκολη πρόσβαση. Μπορείτε να δείτε πώς λειτουργούν αυτά τα κινούμενα σχέδια κάνοντας κλικ στα παραδείγματα στον ιστότοπο.
- Προσαρμόσιμο: Δεν χρειάζεται να επιλέξετε αυτά τα κινούμενα σχέδια ως έχουν. Μπορείτε να προσαρμόσετε τον κώδικα για να ταιριάζει στις ανάγκες σας και να δείτε τις αλλαγές σε πραγματικό χρόνο. Στη συνέχεια, μπορείτε να επιλέξετε τον κωδικό σας και να τον προσθέσετε στον ιστότοπό σας μόλις βεβαιωθείτε ότι λειτουργεί.
Το Animista είναι μια δωρεάν βιβλιοθήκη CSS.
Motion UI
Το Motion UI έρχεται με ενσωματωμένα εφέ για να κάνει την κίνηση του ιστοτόπου σας παιχνιδάκι. Τα προκατασκευασμένα εφέ ομαδοποιούνται ως κλάσεις CSS σε αυτήν τη βιβλιοθήκη Saas.
Χαρακτηριστικά
- Εύκολη διαμόρφωση: Μπορείτε να εγκαταστήσετε το Motion UI χρησιμοποιώντας το Bower ή το NPM. Στη συνέχεια, μπορείτε να @include ή @inport τη βιβλιοθήκη στα αρχεία CSS ή SASS, αντίστοιχα.
- Συμβατό με JavaScript: Αυτή η βιβλιοθήκη διαθέτει μια μικρή βιβλιοθήκη JavaScript που μπορείτε να χρησιμοποιήσετε για την αναπαραγωγή μεταβάσεων.
- Προσαρμόσιμο: Ο πίνακας εργαλείων επιτρέπει στους προγραμματιστές ιστού να προσαρμόζουν τα εφέ κινούμενων εικόνων σύμφωνα με τις προτιμήσεις τους. Η ταχύτητα, η χαλάρωση και τα εφέ εξασθένισης είναι μερικά πράγματα που μπορείτε να προσαρμόσετε.
Το Motion UI είναι ένα έργο ανοιχτού κώδικα.
lightGallery
Η lightGallery είναι μια ελαφριά βιβλιοθήκη που μπορούν να χρησιμοποιήσουν οι προγραμματιστές για να δημιουργήσουν όμορφες γκαλερί βίντεο και εικόνων για εφαρμογές web. Μπορείτε να χρησιμοποιήσετε αυτή τη βιβλιοθήκη σε όλες τις μεγάλες γκαλερί.
Χαρακτηριστικά
- Πλήρως απόκριση: Οι κλάσεις CSS της LightGallery ανταποκρίνονται σε διαφορετικά μεγέθη οθόνης. Αυτή η βιβλιοθήκη είναι επίσης βελτιστοποιημένη για συσκευές αφής.
- Συνοδεύεται από διάφορες προσθήκες: Μπορείτε να βελτιώσετε τη χρηστικότητα αυτής της βιβλιοθήκης μέσω των προσθηκών της, όπως το Thumbnail, το Video και το MediumZoom.
- Προσαρμόσιμο: Αφού επιλέξετε την τάξη CSS σας, μπορείτε να την προσαρμόσετε ώστε να ταιριάζει στις ανάγκες σας.
- Υποστήριξη βίντεο: το lightGallery είναι συμβατό με YouTube, Wistia και Vimeo.
Η lightGallery είναι μια βιβλιοθήκη ανοιχτού κώδικα και δωρεάν.
Καθαροί φορτωτές CSS
Το Pure CSS Loaders είναι μια συλλογή από κινούμενα σχέδια CSS φιλικά προς τους προγραμματιστές, βελτιστοποιημένα για ταχύτητα.
Χαρακτηριστικά
- Εύκολο στη χρήση: Δεν χρειάζεται να εγκαταστήσετε τίποτα για να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη. Κάντε κλικ στο πρόγραμμα φόρτωσης που θέλετε να χρησιμοποιήσετε για να αποκαλύψετε τον κώδικα και αντιγράψτε και επικολλήστε τον στο έργο σας.
- Προσαρμόσιμο: Αυτή η βιβλιοθήκη έχει έξι χρώματα για να διαλέξετε για τους φορτωτές σας. Μπορείτε να επιλέξετε ένα και η πλατφόρμα παρέχει το αντίστοιχο μπλοκ κώδικα.
- Εκτεταμένη συλλογή: Το Pure CSS Loaders είναι μέρος των πολλών κλάσεων CSS στον κύριο ιστότοπο.
- Συμβατό με μεγάλα προγράμματα περιήγησης.
Το Pure CSS Loaders διαθέτει ένα δωρεάν πακέτο με έως και 10 δωρεάν πόρους. Τα επί πληρωμή πακέτα ξεκινούν από 9,99 $/μήνα.
AnimXYZ
Το AnimXYZ παρέχει στους προγραμματιστές ιστού έναν εύκολο τρόπο να ζωντανεύουν στοιχεία, περιγράφοντας το κινούμενο σχέδιο με ορισμένες μεταβλητές και χαρακτηριστικά. Αυτή η βιβλιοθήκη χρησιμοποιεί CS Variables κάτω από την κουκούλα.
Χαρακτηριστικά
- Cross-platform: Μπορείτε να χρησιμοποιήσετε το AnimXYZ με σελίδες HTML, React και Vue JS.
- Ολοκληρωμένη τεκμηρίωση: Η τεκμηρίωση έχει όλα όσα χρειάζεστε για να δημιουργήσετε απλά, προηγμένα κινούμενα σχέδια.
- Ολοκληρωμένη βιβλιοθήκη: Η πλατφόρμα διαθέτει εκατοντάδες κινούμενα σχέδια που μπορείτε να επιλέξετε.
- Responsive design: Οι κλάσεις CSS που παρέχονται από την AnimXYZ ανταποκρίνονται σε διαφορετικά μεγέθη οθόνης.
- Προσαρμόσιμο: Μπορείτε να προσαρμόσετε τον κώδικα CSS σε αυτήν την πλατφόρμα για να ταιριάζει στις ανάγκες σας.
Το AnimXYZ είναι ένα έργο ανοιχτού κώδικα.
Hover.CSS
Το Hover.css είναι μια συλλογή από εφέ αιώρησης που μπορείτε να εφαρμόσετε σε κουμπιά, συνδέσμους, εικόνες και επιλεγμένες εικόνες.
Χαρακτηριστικά
- Διαθέσιμο για διαφορετικές τεχνολογίες: Μπορείτε να χρησιμοποιήσετε το Hover.css με αρχεία CSS, SASS και LESS.
- Ομαδοποιημένα εφέ: Η αρχική σελίδα έχει διαφορετικές κατηγορίες για εξοικονόμηση χρόνου. Για παράδειγμα, η κατηγορία Μεταβάσεις φόντου έχει διάφορα εφέ που μπορείτε να χρησιμοποιήσετε ως φόντο για στοιχεία ιστοσελίδας.
- Υποστήριξη μεταξύ προγραμμάτων περιήγησης: Το Hover.CSS λειτουργεί με μεγάλα προγράμματα περιήγησης με μερικές εξαιρέσεις. Για παράδειγμα, η παρακάτω έκδοση του Internet Explorer δεν υποστηρίζει μεταβάσεις και κινούμενα σχέδια.
Το Hover.CSS είναι δωρεάν για ατομική χρήση. Μια εμπορική άδεια για αυτήν τη βιβλιοθήκη ξεκινά από $14/έργο.
Όλα τα κινούμενα σχέδια
Το All Animation είναι μια συλλογή από κινούμενα σχέδια CSS που μπορείτε να χρησιμοποιήσετε για να δώσετε ζωή στα έργα σας στον ιστό. Μπορείτε να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη με CSS ή SCSS.
Χαρακτηριστικά
- Απλό στη χρήση: Απλώς πρέπει να εγκαταστήσετε τη βιβλιοθήκη All Animation χρησιμοποιώντας NPM ή Yarn και να συμπεριλάβετε το αρχείο στην ενότητα head για να ξεκινήσετε.
- Κατηγοριοποιημένα εφέ: Τα εφέ κινούμενων εικόνων σε αυτήν τη σελίδα ομαδοποιούνται για να σας βοηθήσουν να έχετε έναν εύκολο χρόνο καθώς περιηγείστε. Ορισμένες κατηγορίες είναι Fading Entrances, Bounce, Vibrate και Jello.
- Υποστηρίζει JavaScript: Μπορείτε να προσθέσετε κινούμενα σχέδια που βασίζονται σε συμβάντα χρησιμοποιώντας απλό JavaScript ή JQuery.
Το All Animation είναι μια δωρεάν βιβλιοθήκη ανοιχτού κώδικα.
Τρεις τελείες
Το Three Dots είναι μια συλλογή από κινούμενα σχέδια φόρτωσης CSS που μπορείτε να χρησιμοποιήσετε για να κάνετε τον ιστότοπό σας οπτικά ελκυστικό.
Χαρακτηριστικά
- Διαδραστική επίδειξη: Μπορείτε να φανταστείτε πώς θα είναι τα κινούμενα σχέδια προβάλλοντάς τα στην αρχική σελίδα αυτού του ιστότοπου.
- Εύκολη ρύθμιση: Απλώς πρέπει να εγκαταστήσετε τη βιβλιοθήκη Three Dots χρησιμοποιώντας npm και, στη συνέχεια, να εισαγάγετε τα στυλ στο αρχείο SASS σας για να ξεκινήσετε.
- Ποικιλία 3 κουκκίδων για να διαλέξετε: Το Three Dots δεν σας περιορίζει, καθώς συνοδεύεται από μια ποικιλία κινούμενων εικόνων που μπορείτε να επιλέξετε.
Το Three Dots είναι μια δωρεάν βιβλιοθήκη CSS ανοιχτού κώδικα.
CSShake
Το CSShake είναι μια βιβλιοθήκη CSS με μια συλλογή από κινούμενα σχέδια για να προσθέσετε οπτική ελκυστικότητα στον ιστότοπό σας.
Χαρακτηριστικά
- Ζωντανή επίδειξη: Η αρχική σελίδα διαθέτει επιδείξεις διαφόρων ανακινήσεων για να σας βοηθήσει να δοκιμάσετε τα αποσπάσματα κώδικα πριν τα προσθέσετε στον ιστότοπό σας.
- Εύκολη ενσωμάτωση: Απλώς πρέπει να εγκαταστήσετε το CSShake χρησιμοποιώντας npm και να το συμπεριλάβετε στο αρχείο CSS για να ξεκινήσετε.
- Ολοκληρωμένη τεκμηρίωση: Ο οδηγός βήμα προς βήμα θα σας βοηθήσει να ρυθμίσετε γρήγορα τη βιβλιοθήκη στο φάκελο του έργου σας.
- Προσαρμόσιμο: Μπορείτε να προσαρμόσετε τα αποσπάσματα κώδικα από αυτόν τον ιστότοπο ώστε να ταιριάζουν στο θέμα σας.
Το CSShake είναι μια δωρεάν βιβλιοθήκη κινούμενων σχεδίων CSS ανοιχτού κώδικα.
Μαγικά κινούμενα σχέδια
Το Magic Animations είναι μια συλλογή μαθημάτων κινούμενων σχεδίων για τη βελτίωση της οπτικής απήχησης ενός ιστότοπου.
Χαρακτηριστικά
- Ποικιλία τάξεων κινουμένων σχεδίων: Υπάρχουν διαφορετικές κατηγορίες, όπως Magic Effects, Static Effects, Bling, On The Space και Math.
- Υποστηρίζει JavaScript: Μπορείτε να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη με το JQuery για να βελτιώσετε τη διαδραστικότητα στον ιστότοπό σας.
- Υποστήριξη πολλαπλών προγραμμάτων περιήγησης: Το Magic Animations υποστηρίζει μεγάλα προγράμματα περιήγησης όπως το Google Chrome, το Mozilla Firefox, το Opera και το Safari.
- Λεπτομερής τεκμηρίωση: Η βιβλιοθήκη παρέχει τεκμηρίωση για να σας βοηθήσει να ξεκινήσετε γρήγορα.
Το Magic Animations είναι μια δωρεάν βιβλιοθήκη CSS ανοιχτού κώδικα που υποστηρίζεται από μια κοινότητα.
Άμπουργκερ
Το Amburgers είναι μια συλλογή από κινούμενα εικονίδια που μπορούν να χρησιμοποιήσουν οι προγραμματιστές για να εμφανίσουν στοιχεία μενού σε ιστοσελίδες.
Χαρακτηριστικά
- Διαδραστική ζωντανή επίδειξη: Μπορείτε να οπτικοποιήσετε πώς θα είναι αυτά τα κινούμενα σχέδια προτού τα προσθέσετε στον ιστότοπό σας.
- Απλή ενσωμάτωση: Κατεβάστε και συμπεριλάβετε τα κινούμενα χάμπουργκερ στην ενότητα του αρχείου HTML για να αρχίσετε να χρησιμοποιείτε αυτήν τη βιβλιοθήκη.
- Προσαρμόσιμο: Χρησιμοποιώντας αυτήν τη βιβλιοθήκη, μπορείτε να αλλάξετε γραμματοσειρές, χρώματα και πολλά άλλα.
- Υποστήριξη πολλαπλών προγραμμάτων περιήγησης: Μπορείτε να χρησιμοποιήσετε κινούμενα χάμπουργκερ με μεγάλα προγράμματα περιήγησης εκτός από το Opera Mini.
Το Animated Hamburgers είναι μια δωρεάν βιβλιοθήκη ανοιχτού κώδικα της οποίας ο πηγαίος κώδικας φιλοξενείται στο GitHub.
Δίνη
Το Whirl είναι μια συλλογή από κινούμενα σχέδια φόρτωσης CSS που μπορείτε εύκολα να ενσωματώσετε στις ιστοσελίδες σας.
Χαρακτηριστικά
- Εύκολη διαμόρφωση: Μπορείτε να εγκαταστήσετε το Whirl χρησιμοποιώντας npm ή νήμα.
- Πολλαπλών χρήσεων: Μπορείτε να χρησιμοποιήσετε το Whirl με CSS και SASS.
- Tons of whirls: Η πλατφόρμα έχει 106 στροβιλισμούς για να διαλέξετε.
Το Whirl είναι μια δωρεάν βιβλιοθήκη CSS ανοιχτού κώδικα.
Τελικές σκέψεις
Τώρα διαθέτετε περισσότερες από δώδεκα βιβλιοθήκες CSS Animation που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε την οπτική ελκυστικότητα των ιστοσελίδων σας και την αφοσίωση των χρηστών. Η επιλογή μιας βιβλιοθήκης κινούμενων σχεδίων θα εξαρτηθεί από τους τελικούς στόχους και τις προτιμήσεις σας.
Εάν θέλετε να βελτιώσετε τις δεξιότητές σας στο CSS, ρίξτε μια ματιά στα φύλλα εξαπάτησης CSS.