Το Tuesday.css είναι η πιο πρόσφατη βιβλιοθήκη κινούμενων σχεδίων
Μέχρι τώρα θα πρέπει να είστε εξοικειωμένοι Animate.css όπως και η κύρια βιβλιοθήκη κινούμενων σχεδίων μεταξύ των σχεδιαστών ιστοσελίδων.
Αλλά υπάρχει ένα νέο παιδί στο μπλοκ που ονομάζεται Τρίτη, και είναι παίρνοντας το animation μέσω διαδικτύου.
Αυτή η νέα βιβλιοθήκη δεν είναι πολύ διαφορετική σε μορφή ή εφαρμογή. Αλλά την Τρίτη έρχεται με μια χούφτα νέα animations CSS ότι εσυ δεν μπορεί να βρει πουθενά αλλού.
Αυτά τα νέα αποτελέσματα είναι πολύ πιο λεπτή στη φύση έτσι πραγματικά μείγμα σε μια σελίδα όμορφα. Εδώ είναι α μικρή λίστα των αποτελεσμάτων μπορείτε να επιλέξετε από:
- Εξαερώστε και επεκτείνετε
- Εξαφανίστε και συρρικνώστε
- Σφράγιση κάτω & αναπήδηση
- Γωνιακή κούνια
- Πέτα από αριστερά / δεξιά
- Σκουός / τέντωμα
- Μεντεσές
Εάν περάσετε από αυτή τη λίστα στη σελίδα επίδειξης, θα παρατηρήσετε ότι έχουν όλα τα εφέ ένα κοινό πράγμα: η φυσική.
Όλοι αισθάνονται πολύ ρεαλιστικά στα βασικά της φυσικής, και φαίνεται ότι να τηρούν τους νόμους της βαρύτητας. Κανένα από αυτά τα κινούμενα σχέδια δεν είναι πάνω-πάνω ή εξωτερικά. Είναι λεπτή, αλλά αξιοσημείωτη και το πιο σημαντικό, είναι πιστευτός.
Νομίζω ότι η Τρίτη είναι μία από τις καλύτερες σύγχρονες βιβλιοθήκες CSS animation γιατί παρουσιάζει μια ρεαλιστική άποψη του animation στο διαδίκτυο.
Δεν πρέπει να σχεδιάζουμε τρελά εφέ που να ξεχωρίζουν σαν τον πόνο. Λεπτότητα είναι πάντα το όνομα του παιχνιδιού γιατί δημιουργεί μια αίσθηση διαδραστικότητας από κάθε είσοδο χρήστη, είτε πρόκειται για κλικ είτε για κύλιση.
Το πρόβλημα ήταν πάντα να γράφουν αυτά τα κινούμενα σχέδια από το μηδέν και να τα πάρει να φαίνονται σωστά. Αλλά τώρα με την Τρίτη οι ανησυχίες σας μπορούν να πετάξουν έξω από την πόρτα.
Μόλις κατεβάστε ένα αντίγραφο από το GitHub και πρόσθεσε το .css αρχείου στη σελίδα σας. Μπορείτε πραγματικά χρησιμοποιήστε την έκδοση CDN κατευθείαν από το GitHub αν δεν θέλετε να κατεβάσετε τίποτα σε τοπικό επίπεδο.
Μόλις αυτό προστεθεί στην ιστοσελίδα σας, απλά προσαρτήστε το .έμψυχος μαζί με οποιαδήποτε από τις ιδιόκτητες κατηγορίες που αναγράφονται στο repos GitHub. Ο κώδικας μπορεί να φαίνεται σαν εξής:
Είναι Τρίτη.
Ρίξτε μια ματιά στο πλήρη τεκμηρίωση για να δω μια λίστα όλων των κατηγοριών κίνησης εισόδου / εξόδου.
Εάν εργάζεστε με JavaScript μπορείτε επίσης προσθέστε αυτές τις κλάσεις δυναμικά σε συμβάντα κλικ / επικάλυψης. Με αυτόν τον τρόπο μπορείτε να προσθέσετε την κλάση animate μόνο όταν ένας χρήστης κάνει κλικ σε ένα κουμπί, το οποίο φαίνεται να ζωντανεύει με κλικ.
Υπάρχουν πολλά πράγματα που μπορείτε να κάνετε με την Τρίτη και είναι πραγματικά το νέο Animate.css για ρεαλιστικά animations του UI.
Ρίξτε μια ματιά στο σελίδα επίδειξης για να το δείτε ζωντανά στη δράση, και μπορείτε να μάθετε περισσότερα διαβάζοντας μέσω του “στην παραγωγή” Θέση που μιλά για το πώς δημιουργήθηκε η ομάδα Shakr την Τρίτη.
