Wicked CSS - Μια καυτή νέα βιβλιοθήκη κινουμένων σχεδίων στο Pure CSS3
Χάρη στο CSS3 μπορείτε να δημιουργήσετε τρελά animations στον ιστό. Αυτά μπορούν να εργάζονται σε όλα τα προγράμματα περιήγησης και τα στοιχεία της σελίδας για να ελέγχετε τα στοιχεία πλοήγησης, τα αναπτυσσόμενα μενού, τις καρτέλες, το ονομάζετε.
Στην πραγματικότητα, μπορείτε ακόμη και να δημιουργήσετε αυτούς τους κωδικούς δυναμικά χρησιμοποιώντας εργαλεία κινούμενης εικόνας. Αλλά αυτά είναι αρκετά περιορισμένα σε σύγκριση με μια πλήρης βιβλιοθήκη animation.
Το κακό CSS είναι η νεότερη βιβλιοθήκη του είδους του. Αυτό μου θυμίζει τα πρώτα Το Animate.css ήταν αρκετά απλό και στοιχειώδες, αλλά θα μπορούσε να χρησιμοποιηθεί σε σχεδόν οποιαδήποτε ιστοσελίδα.
Ρίξτε μια ματιά στην αρχική σελίδα για μια ζωντανή επίδειξη μαζί με μια λίστα όλων των υποστηριζόμενων κινούμενων σχεδίων. Από τη συγγραφή αυτού του άρθρου, υπολογίζω 24 συνολικά στυλ κινουμένων σχεδίων από διαφάνειες σε περιστροφές και παλμικά / αναπήδηση εφέ.
Πολλά από αυτά τα κινούμενα σχέδια είναι εφάπαξ χαρακτηριστικά που χρησιμοποιούνται για την προβολή ενός στοιχείου (ή χωρίς θέα). Αυτό είναι βολικό για σελίδες με κινούμενες εικόνες με κύλιση προς προβολή που στοχεύουν συγκεκριμένα στοιχεία σελίδας.
Αλλά μπορείτε επίσης χρησιμοποιήστε το για να εμφανίσετε (ή να αποκρύψετε) πρόσθετα στοιχεία σελίδας όπως τα αναπτυσσόμενα μενού, τις γραμμές αναζήτησης, τις κρυφές φόρμες εγγραφής ή οτιδήποτε άλλο. Ακολουθεί μια μικρή λίστα από κινούμενα σχέδια που μπορείτε να επιλέξετε από:
- Σέικ
- Μεγέθυνση / σμίκρυνση
- Σύρετε επάνω / κάτω
- Διαφυγή / έξοδος
- Μετακίνηση / έξοδος
- Αναπήδηση και ποπ
- Κυκλική περιστροφή μέσα / έξω
Όλα αυτά τα στυλ κινουμένων σχεδίων έχουν σχεδιαστεί για μία μόνο χρήση. Μπορούν να ονομάζονται πολλές φορές ανά σελίδα και ανά στοιχείο, αλλά αυτά δεν είναι επαναλαμβανόμενα κινούμενα σχέδια.
Αντ 'αυτού, θα τα χρησιμοποιήσετε με βάση το κλικ του χρήστη, το δείκτη του ποντικιού ή το σνακ. Μπορούν επίσης να χρησιμοποιηθούν σε κουμπιά CTA για παλμικά / παλλόμενα εφέ, αλλά απαιτεί μια λειτουργία χρονισμού JavaScript.
Ρίξτε μια ματιά στη σελίδα παραδειγμάτων για μια ζωντανή προεπισκόπηση και μερικές περισσότερες λεπτομέρειες. Θα βρείτε επίσης πλήρη τεκμηρίωση στον κύριο ιστότοπο μαζί με το repo GitHub.
Το Wicked CSS είναι μια νεότερη βιβλιοθήκη, οπότε δεν έχει ακόμα τεράστια αποτελέσματα. Αλλά η βιβλιοθήκη είναι σταθερή και είναι πιθανό να είναι γύρω για τα επόμενα χρόνια.
