Δημιουργήστε πλήρως κινούμενα γραφικά widget με Shift.css

Web animation προσφέρει έναν τρόπο να πιάστε την προσοχή των ανθρώπων και να τους τραβήξει περαιτέρω σε μια ιστοσελίδα. Υπάρχουν πολλά εργαλεία εκεί έξω για να δημιουργήστε δωρεάν κινούμενα σχέδια αλλά Shift.css είναι ένα από τα νεότερα στη δέσμη.

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

ο Προβολή σελίδας επίδειξης μπορεί να σας δείξει πολύ καλύτερα από ό, τι μπορώ να εξηγήσω με λόγια.

Ένα πράγμα που θα παρατηρήσετε είναι ότι κάθε στοιχείο μέσα στο δοχείο είναι ένα ξεχωριστό στοιχείο HTML. Είτε πρόκειται για ένα SVG είτε για μια εικόνα ή οτιδήποτε άλλο, μπορείτε να ζωντανέψετε τα πάντα ξεχωριστά δημιουργήστε το δικό σας προσαρμοσμένο εφέ κίνησης.

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

Δεν μπορώ να βρω κανένα repo GitHub για αυτό το έργο, οπότε θα πρέπει να το κάνετε κατεβάστε απευθείας τα αρχεία από την ιστοσελίδα Shift.css.

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

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

1. δεδομένα-κινούμενα σχέδια: Όνομα της κινούμενης εικόνας
2. καθυστέρηση δεδομένων: Η συνολική καθυστέρηση (σε δευτερόλεπτα) πριν ξεκινήσει η κινούμενη εικόνα
3. διάρκεια δεδομένων: Συνολικό μήκος (σε δευτερόλεπτα) της κινούμενης εικόνας

Το όνομα κινούμενης εικόνας πρέπει να είναι α προκαθορισμένη κινούμενη εικόνα που δημιουργήθηκε για τη βιβλιοθήκη Shift. Αυτή τη στιγμή υπάρχουν 15 ονόματα κινούμενων σχεδίων για να διαλέξετε. Μπορείτε να τα δείτε στο κάτω μέρος της αρχικής σελίδας του Shift.css.

Μόλις αντιγραφή επικόλληση ό, τι θέλεις στη ρύθμιση ονόματος του κινούμενου animation και θα πρέπει να είναι καλό να πάτε! Για παράδειγμα, αν ήθελα να χρησιμοποιήσω την κινούμενη εικόνα εξόδου, θα έλεγα δεδομένα-κινούμενη εικόνα = "shift_exitFade" ως χαρακτηριστικό δεδομένων σε οποιοδήποτε στοιχείο πρέπει να ζωντανεύει με αυτόν τον τρόπο. Πανεύκολο.

Εύχομαι αυτή η βιβλιοθήκη να έρθει με περισσότερες επιλογές στο JavaScript, επειδή θα έδινε στους προγραμματιστές τον πολύ μεγαλύτερο έλεγχο της τοποθέτησης και των χαρακτηριστικών. Αλλά για ένα απλό (και δωρεάν) κινούμενο πλαίσιο δεν μπορώ να παραπονεθώ.

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