10 Εργαλεία Animation CSS3 Θα πρέπει να κάνετε σελιδοδείκτη

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

Το CSS3 εισήγαγε μια νέα σύνταξη animation που μπορεί να σας βοηθήσει να επιτύχετε πολλά ενδιαφέροντα πράγματα στα σχέδιά σας. Η οικοδόμηση δροσερών κινούμενων εικόνων μπορεί μερικές φορές να είναι περίπλοκη και χρονοβόρα, όμως, όταν οι βιβλιοθήκες και οι γεννήτριες animaiton μπορούν να χρησιμοποιηθούν άριστα.

Δείτε μερικά από τα κινούμενα σχέδια που έγιναν δυνατά με το CSS:

• 38 Εμπνευσμένες επίδειξη κινήσεων CSS3
• 15 ωραία εφέ κειμένου που δημιουργήθηκαν με CSS
• 30 Cool CSS Animations που έχετε να δείτε
• Πώς να δημιουργήσετε το Effect Bounce με CSS3 Animation

Σε αυτή την ανάρτηση θα δούμε τα 10 λαμπρά εργαλεία που μπορούν να διευκολύνουν και να δημιουργήσουν τα δικά σας κινούμενα σχέδια πιο εύκολα και πιο γρήγορα.

1. CSS3Gen γεννήτρια CSS3 Animation

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

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

2. CSS Animate

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

Υπάρχουν επίσης κινούμενα παραδείγματα, όπως “Πήδημα”, “Σέικ”, και “Κούνια”, που μπορείτε να φορτώσετε στη γεννήτρια και να τροποποιήσετε τον κώδικα ανάλογα με τις ανάγκες σας.

3. Coveloping CSS Γεννήτρια Animation

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

Απλώς πρέπει να ορίσετε 4 παραμέτρους: τον τύπο της κινούμενης εικόνας, τη λειτουργία κινούμενης εικόνας, τη διάρκεια σε δευτερόλεπτα και αν η κινούμενη εικόνα είναι άπειρη. Όταν είστε έτοιμοι, πρέπει μόνο να πάρετε και να αρπάξετε τον παραγόμενο κώδικα HTML και CSS.

4. Μαγικές κινήσεις

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

Το μόνο που έχετε να κάνετε είναι να κατεβάσετε τον κώδικα, να συμπεριλάβετε το αρχείο CSS στη σελίδα HTML και να προσθέσετε την κατάλληλη κλάση με τη βοήθεια του jQuery με τον ακόλουθο τρόπο:

 $ () .addClass ('magictime puffIn');));

Μπορείτε επίσης να αλλάξετε τις ρυθμίσεις του χρονομέτρου και να κάνετε την κινούμενη εικόνα άπειρη με τη βοήθεια του jQuery (για περισσότερες λεπτομέρειες δείτε το αρχείο readme).

5. Animate.css

Animate.css σας παρέχει ένα σύνολο από cool, cross-browser CSS3 κινούμενα σχέδια. Τα κινούμενα σχέδια χωρίζονται σε ομάδες όπως οι αναζητητές προσοχής, οι αναπηδήσεις εισόδου, οι αναπηδήσεις εξόδου, οι εισροές εξασθένισης και πολλοί άλλοι, οπότε δεν μπορείτε πραγματικά να παραπονεθείτε για την έλλειψη επιλογής.

Μπορείτε να κατεβάσετε τον κώδικα από το Github, τότε πρέπει μόνο να προσθέσετε το αρχείο CSS στη σελίδα σας HTML και τις σχετικές κλάσεις CSS στα στοιχεία HTML που θέλετε να ζωντανέψετε.

6. Bounce.js

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

7. AniJS

AniJS είναι μια υπερχολική βιβλιοθήκη JavaScript που σας επιτρέπει να προσθέσετε κινούμενα σχέδια CSS3 στα σχέδιά σας και σε κατασκευάστε εξελιγμένα στοιχεία UI όπως κινούμενες καρτέλες, ακορντεόν, modals, συρόμενα μενού, ειδοποιήσεις για κινητές εφαρμογές, αποκαλύψεις κύλισης και πολλά άλλα.

Λειτουργεί με όλα τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένων των iOS και Android, δεν χρειάζεται βιβλιοθήκες τρίτων και έχει μια εκπληκτική βιτρίνα που ονομάζεται AniCollection όπου μπορείτε εύκολα να πειραματιστείτε με τα διάφορα εφέ που παρέχει η βιβλιοθήκη.

8. Spinners CSS ενός στοιχείου

Θέλατε ποτέ να βελτιώσετε τα σχέδιά σας με κινούμενες κλώστες φόρτωσης? Εάν η απάντηση είναι ναι, αυτή η χαριτωμένη βιβλιοθήκη CSS spinner μπορεί να είναι μια εξαιρετική επιλογή για εσάς. Ο κώδικας CSS για τους κλώστες γράφεται σε λιγότερο. Δεν υπάρχουν ρυθμίσεις, ο κώδικας είναι έτοιμος, πρέπει να το βάλετε μόνο στα αρχεία HTML και CSS.

9. Οδόμετρο

Οδόμετρο είναι ένα λαμπρό εργαλείο Τοποθετήστε δροσερά κινούμενα μέτρα στον ιστότοπό σας. Είναι μια βιβλιοθήκη CSS και JavaScript, το τμήμα CSS είναι γραμμένο σε Sass, και μπορείτε να επιλέξετε από διαφορετικά θέματα, όπως “Ψηφιακό”, “Σιδηροδρομικό σταθμό”, και “Αυτοκίνητο”.

Για να χρησιμοποιήσετε το Οδομετρητή, πρέπει να προσθέσετε το αρχείο JavaScript και το επιλεγμένο αρχείο θεμάτων στη σελίδα HTML και, στη συνέχεια, στο class = "οδόμετρο" επιλογέα στο στοιχείο που θέλετε να δημιουργήσετε σε κινούμενο μετρητή. Ιδανική επιλογή για την οπτική αναπαραγωγή δεδομένων ή για την πραγματοποίηση ενός “Ερχομαι συντομα” σελίδα πιο εντυπωσιακό.

10. Snabbt.js

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

Θα χρειαστεί να γράψετε λίγο JavaScript αν θέλετε να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη, αλλά ως αποτέλεσμα είναι αρκετά εντυπωσιακό, γι 'αυτό αξίζει τον κόπο.