Το Animate.css ήταν εδώ και μερικά χρόνια και πρέπει να παραδεχτώ ότι είναι αργά στο πάρτι. Ανακάλυψα μόνο πριν από μερικούς μήνες, ενώ έψαχνα το δίκτυο για μερικά προγράμματα εκμάθησης animation CSS και βρήκα αυτό που πρέπει να είναι ο ταχύτερος και απλούστερος τρόπος για να ζωντανέψετε γύρω από το Animate.css.
Δημιουργημένος από έναν άνθρωπο που ονομάζεται Dan Eden, το Animate.css είναι ένας γρήγορος τρόπος για να δείτε πώς λειτουργεί το CCS και να πάρετε κάποια δράση κινουμένων σχεδίων στον ιστότοπό σας.
Περιγράφεται ως "Just-add water animation CSS" Το Animate.css είναι λίγο διασκεδαστικό με μια σοβαρή πλευρά. Επιτρέπει ακόμη και ερασιτέχνες σχεδιαστές ιστού, όπως εγώ, να έρχομαι γρήγορα στο χέρι με τις βασικές αρχές της κίνησης CSS και να δημιουργούμε απλά αλλά αποτελεσματικά αποτελέσματα για τους ιστοτόπους. Από ένα μόνο κινούμενο τίτλο σε πιο εμπλεκόμενες κινήσεις, αυτό το εργαλείο μπορεί να το κάνει.
Animate.css
Το Animate.css είναι διαθέσιμο για λήψη από το GitHub και είναι ουσιαστικά μια βιβλιοθήκη απλών αποτελεσμάτων CSS που συλλέγονται σε ένα μέρος. Κάθε κινούμενο σχέδιο είναι όμορφα συσκευασμένο και έτοιμο για χρήση. Το μόνο που χρειάζεται να κάνετε είναι να βρείτε το κινούμενο σχέδιο που σας αρέσει και να εφαρμόσετε την τάξη. Αυτό είναι πραγματικά το μόνο που υπάρχει σε αυτό.
Δεν χρειάζεται να κάνετε λήψη ολόκληρης της βιβλιοθήκης αν δεν θέλετε, καθώς υπάρχουν 2.500 γραμμές κώδικα μέσα σε αυτήν. Μπορείτε να επισκεφθείτε την τοποθεσία Animate.css, να βρείτε μια κινούμενη εικόνα και να κάνετε κλικ στο σύνδεσμο Download Animate.css. Φορτώνει την κλάση σε μια ιστοσελίδα για να αντιγράψετε και να χρησιμοποιήσετε ό, τι κρίνετε κατάλληλο.
Είναι πιο εύκολο όμως να χρησιμοποιήσετε το GitHub και να κάνετε αναζήτηση για να βρείτε το αποτέλεσμα που αναζητάτε.
- Μεταβείτε στη σελίδα css GitHub.
- Κάντε κλικ στο σύνδεσμο Πηγή για να αποκτήσετε πρόσβαση στη λίστα στοιχείων.
- Επιλέξτε τον τύπο εφέ που αναζητάτε από τη λίστα. Το Bounce είναι ένας αναζητητής ενδιαφέροντος, οπότε επιλέξτε τον σύνδεσμο attention_seekers.
- Επιλέξτε bounce.css.
- Αντιγράψτε τον κώδικα και τοποθετήστε τον στη σελίδα σας για να εφαρμόσετε την κινούμενη εικόνα.
Είναι πραγματικά τόσο απλό. Προφανώς θα επιλέξετε διαφορετικές επιλογές για τα διάφορα αποτελέσματα, αλλά το τελικό αποτέλεσμα είναι το ίδιο. Πρόσβαση στον απαραίτητο κωδικό για να κάνετε βαριά ανύψωση στη σελίδα.
Δημιουργία κινούμενου αντικειμένου με το Animate.css
Δημιουργώντας κάτι δροσερό με το Animate.css είναι απλό. Είναι απλώς θέμα εύρεσης του κώδικα CCS και προσθήκης του στο δικό σας CSS. Αν μπορώ να το κάνω, ο καθένας μπορεί!
Η πρώτη επιλογή στη σελίδα Animate.css είναι αναπήδηση, οπότε ας το χρησιμοποιήσουμε σε αυτό το παράδειγμα.
- Επικόλληση ' ' μέσα στο φύλλο στυλ σας.
- Βρείτε το CSS για την κινούμενη εικόνα που θέλετε και προσθέστε το στο στοιχείο που θέλετε να ζωντανέψετε. Για παράδειγμα, προσθέστε ' 'για να προσθέσετε αυτό το αποτέλεσμα αναπήδησης προς δοκιμή, μια εικόνα ή οτιδήποτε άλλο.
- Προσθέστε τον ακόλουθο κώδικα CSS για να το κάνετε όλα. Λαμβάνεται από το bounce.css παραπάνω.
@ αναστροφή των κλειδιών {
από, 20%, 53%, 80%, έως {
λειτουργία κινούμενων εικόνων-χρονισμού: κυβικό-bezier (0.215, 0.610, 0.355, 1.000).
μετασχηματισμός: translate3d (0, 0, 0);
}}
40%, 43% {
λειτουργία κινούμενου χρόνου-χρονισμού: κυβικό-bezier (0.755, 0.050, 0.855, 0.060).
μετασχηματισμός: μεταφράστε3d (0, -30px, 0);
}}
70% {
λειτουργία κινούμενου χρόνου-χρονισμού: κυβικό-bezier (0.755, 0.050, 0.855, 0.060).
μετασχηματισμός: translate3d (0, -15px, 0);
}}
90% {
μετασχηματισμός: μεταφράζει3d (0, -4px, 0);
}}
}}
.bounce {
animation-name: αναπήδηση?
μετασχηματισμός-προέλευση: κεντρικός πυθμένας.
}}
Λήψη κινούμενης εικόνας με το Animate.css
Η παραπάνω αλληλουχία προσθέτει ένα φαινόμενο αναπήδησης όταν η πρώτη σελίδα φορτώνει, κάτι που είναι δροσερό αλλά ένα μοναδικό πράγμα. Τι λέτε για να το προσθέσουμε στην αιώρηση. Με αυτόν τον τρόπο, κάθε φορά που κάποιος αιωρείται πάνω από τη δοκιμασία, αναπηδά. Δεν είναι κάτι που θα έκανα σε έναν ιστότοπο παραγωγής, αλλά είναι ένας πολύ καλός τρόπος να δείξουμε πώς λειτουργούν όλα.
Προσθέστε τον ακόλουθο κώδικα στο CSS σας για να προσθέσετε την αναπήδηση στην επίδραση του hover. Το κάθε φορά που το ποντίκι κινείται πάνω από το στοιχείο, θα πρέπει να αναπηδήσει.
.αποθηκευμένη: μετακινήστε {
-webkit-animation-διάρκεια: 1s;
-moz-animation-duration: 1s;
-ms-animation-διάρκεια: 1s;
-o-animation-διάρκεια: 1s;
διάρκεια ζωής: 1 δευτερόλεπτο;
-webkit-animation-fill-mode: και οι δύο;
-moz-animation-fill-mode: και οι δύο;
-ms-animation-fill-mode: και οι δύο.
-o-animation-fill-mode: και οι δύο.
animation-fill-mode: και οι δύο?
}}
Εάν γνωρίζετε το CSS, θα γνωρίζετε πολύ καλύτερα από μένα πώς να εφαρμόσετε διαφορετικά αποτελέσματα σε διαφορετικές ενέργειες. Ως αρχάριος, αυτό και οι βιβλιοθήκες που παρέχονται στο Animate.css με βοηθούν να δημιουργήσω βασικά αλλά αποτελεσματικά κινούμενα σχέδια για τις ιστοσελίδες μου.
Δεν ξέρω πόσοι θα χρησιμοποιούσα σε έναν ζωντανό ιστότοπο, καθώς δεν πάει πάντοτε πάρα πολύ καλά και οι χρήστες κινητής τηλεφωνίας δεν φαίνεται να τους αρέσουν καθόλου. Ωστόσο, ως ένα μάθημα για το πώς λειτουργεί το CSS και πώς μπορεί να χρησιμοποιηθεί για την ενίσχυση του ιστού, είναι ένας μεγάλος πόρος. Είμαι απλώς ένας αρχάριος, αλλά ακόμη και να ξοδέψω μερικές ώρες με το Animate.css για αυτό το σεμινάριο με έχει διδάξει πολλά. Νομίζω ότι θα παίξω πολύ περισσότερο πριν τελειώσω. Εσυ ΠΩΣ ΕΙΣΑΙ?
