Δημιουργήστε εύκολα αποτελέσματα Cascading με το CascadeJS

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

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

Αυτή η βιβλιοθήκη έχει χωρίς εξαρτήσεις. λειτουργεί με κλασικό JavaScript. Μπορείτε να το εγκαταστήσετε μέσω npm, Bower, ή μεταφορτώντας ένα αντίγραφο απευθείας από το GitHub.

Για να πάρετε το CascadeJS να λειτουργήσει, θα το κάνετε χρειάζονται δύο αρχεία: ένα αρχείο CSS και ένα αρχείο JavaScript. Και οι δύο έρχονται συσκευασμένα με εξομοιούμενες εκδόσεις για να σας εξοικονομήσει λίγα KB στο μέγεθος της σελίδας.

Κάθε στοιχείο Cascade χωρίζεται σε ξεχωριστά τμήματα τα οποία ζωντανά ξεχωριστά διά μέσου στοιχεία. Αυτά είναι πρόσθεσε δυναμικά, έτσι δεν χρειάζεται να αλλάξετε τίποτα στο HTML σας.

Αλλά, θα πρέπει να ρυθμίστε το ροή() λειτουργία στο αρχείο σας, μετά τη στοχοθέτηση οποιουδήποτε στοιχείου θέλετε να ζωντανέψετε.

Μπορείτε πραγματικά χρησιμοποιήστε το jQuery με αυτή τη βιβλιοθήκη αν θέλετε, ωστόσο δεν απαιτείται. Έτσι, αν προτιμάτε να επιλέξετε στοιχεία με το jQuery, μπορείτε να χρησιμοποιήσετε αυτό αντί για αυτό.

Εδώ είναι α απόσπασμα της βανίλιας JavaScript από το demo του βασικού ιστότοπου:

Μπορείτε να περάσετε το ροή() στοιχείο με χωρίς παραμέτρους, ή μπορείτε να τα διαμορφώσετε όλα σύ ο ίδιος. Παίρνει Οκτώ προαιρετικές παραμέτρους για την επεξεργασία του στυλ κίνησης, του χρονισμού, της διάρκειας και των προαιρετικών τάξεων CSS.

Το CascadeJS έχει μια άλλη λειτουργία που ονομάζεται θραύσμα() που σας επιτρέπει χωρίστε γράμματα (ή στοιχεία) σε χωριστά δοχεία, χωρίς να τα εμψυχώσετε. Μπορείτε να χρησιμοποιήσετε τη λειτουργία αυτή χρώμα και κείμενο restyle στη σελίδα, στοχεύοντας κάθε ξεχωριστό γράμμα σε μια λέξη. Αρκετά δροσερό, σωστά?

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