Δημιουργία προχωρημένου Marquee με CSS3 Animation
Σήμερα θα ρίξουμε μια ματιά “στέγη εισόδου” Άλλη μια φορά. Στην πραγματικότητα έχουμε καλύψει το θέμα στην προηγούμενη θέση μας, η οποία μίλησε για τη χρήση του -webkit-marquee ιδιοκτησία, αλλά αυτή τη φορά θα πάρουμε αυτό το θέμα λίγο περισσότερο.
Σε αυτή τη θέση, θα δημιουργήσουμε ένα μάρκες χρησιμοποιώντας το CSS3 Animation. Με αυτόν τον τρόπο θα μπορέσουμε να προσθέσουμε περισσότερες λειτουργίες που δεν θα μπορούσαν να επιτευχθούν μόνο με το -webkit-marquee.
Εάν δεν είστε ήδη εξοικειωμένοι με τη λειτουργική μονάδα CSS3 Animation, σας συνιστούμε να ρίξετε μια ματιά στις ακόλουθες αναφορές πριν προχωρήσετε σε αυτήν την τεκμηρίωση:
- CSS3 Animations - W3School
- CSS Animations - Mozilla Dev. Δίκτυο
Επίσης, σημειώστε ότι αυτή τη στιγμή το CSS3 Animation μπορεί να λειτουργήσει μόνο σε Firefox 8+, Chrome 12+ και Safari 5.0+ με την εκ των προτέρων έκδοση (-moz- και -webkit-). Ωστόσο, θα χρησιμοποιήσουμε μόνο την επίσημη έκδοση από το W3C χωρίς το πρόθεμα για να αποφύγουμε την υπερβολή αυτού του άρθρου με περιττούς κωδικούς.
Αντιμετώπιση του θέματος του Marquee
Ένα από τα προβλήματα με το marquee είναι ότι το κείμενο κινείται συνεχώς. Αυτή η συμπεριφορά διαταράσσει την ανάγνωση και το κείμενο είναι επίσης δύσκολο να διαβαστεί. Αυτή τη φορά, θα προσπαθήσουμε να δημιουργήσουμε τη δική μας έκδοση και να την κάνουμε πιο φιλική προς το χρήστη. Για παράδειγμα; αντί να κινεί το κείμενο συνεχώς, θα το σταματήσουμε όταν είναι πλήρως ορατό, οπότε ο χρήστης μπορεί να διαβάσει το κείμενο για λίγο.
Το Storyboard (είδος)
Κάθε δημιουργική και σχεδιαστική δημιουργία, όπως ένα λογότυπο, μια εικονογράφηση ή μια ιστοσελίδα, αρχίζει συνήθως με ένα σκίτσο. Στον τομέα της παραγωγής κινούμενων σχεδίων, αυτό γίνεται με ένα storyboard. Πριν αρχίσουμε με οποιαδήποτε κωδικοποίηση, θα δημιουργήσουμε πρώτα ένα είδος storyboard, για να μας βοηθήσετε να απεικονίσουμε την κίνηση μας.
Όπως μπορείτε να δείτε από τον παραπάνω πίνακα ιστοριών, σκοπεύουμε να δείξουμε μόνο δύο γραμμές κειμένου, οι οποίες κινούνται διαδοχικά από τα δεξιά προς τα αριστερά.
Το storyboard μας δεν είναι τόσο περίπλοκο όσο ένα storyboard για πραγματική ταινία κινουμένων σχεδίων, αλλά το θέμα είναι: τώρα μπορούμε να φανταστούμε πώς θα μοιάζει η μάρκα μας.
Η σήμανση HTML
Δεδομένου ότι η κίνηση μας θα είναι απλή, η σήμανση HTML θα είναι επίσης τόσο απλή όσο:
Πώς να προσθέσετε WordPress Σχετικές Θέσεις Χωρίς Plugins
Αυτοματοποιήστε τα αρχεία Dropbox με τις ενέργειες
Τα Βασικά Στυλ
Πριν επεξεργαστείτε τα θέματα κινούμενων σχεδίων, ας προσθέσουμε μερικά βασικά στυλ. Ας ξεκινήσουμε προσθέτοντας μια υφή φόντου για το html στοιχείο.
html background: url ('... /images/skewed_print.png'); Στη συνέχεια, θα τοποθετήσουμε το marquee στο κέντρο του παραθύρου του προγράμματος περιήγησης καθώς θα προσθέσουμε κάποιες λεπτομέρειες, όπως εσωτερική σκιά, χρώμα φόντου και σύνορα.
.marquee πλάτος: 500px; ύψος: 50px; περιθώριο: 25px αυτόματα; υπερχείλιση: κρυφή; θέση: σχετική. σύνορα: 1px στερεά # 000; περιθώριο: 25px αυτόματα; φόντο-χρώμα: # 222; -webkit-ακτίνα-ακτίνα: 5px; ακτίνα ακτίνων: 5px; -webkit-box-shadow: ένθετο 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: ένθετο 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Στη συνέχεια, θα τοποθετήσουμε το κείμενο - το οποίο σε αυτή την περίπτωση είναι τυλιγμένο μέσα σε μια ετικέτα παραγράφου - απολύτως, και από το απόλυτος η θέση θα προκαλέσει την κατάρρευση του στοιχείου, θα πρέπει να καθορίσουμε το στοιχείο του πλάτους σε 100% έτσι ώστε να καλύπτει το πλάτος του γονέα του.
.marquee p θέση: απόλυτη; γραμματοσειρά-οικογένεια: Tahoma, Arial, sans-serif; πλάτος: 100%. ύψος: 100%. περιθώριο: 0; γραμμή-ύψος: 50px; κείμενο-ευθυγράμμιση: κέντρο; χρώμα: #fff; σκιά κειμένου: 1px 1px 0px # 000000; φίλτρο: dropshadow (χρώμα = # 000000, offx = 1, offy = 1);
Ας ρίξουμε μια ματιά στο αποτέλεσμα για λίγο.
Σε αυτό το σημείο, έχουμε κάνει με όλα τα βασικά στυλ που χρειαζόμαστε. μπορείτε να προσθέσετε περισσότερα ή εξατομικευμένα στυλ. Αλλά, σας προτείνουμε να κολλήσετε με την καθορισμένη διάστασή μας (το ύψος και το πλάτος) μέχρι το τέλος του σεμιναρίου.
Η Ζωή
Με λίγα λόγια, η κινούμενη εικόνα είναι μια παρουσίαση των κινούμενων αντικειμένων. Κάθε κίνηση ορίζεται σε ένα χρονικό πλαίσιο. Έτσι, όταν εργαζόμαστε για κινούμενα σχέδια, ασχολούμαστε κυρίως με το χρόνος. Λαμβάνουμε υπόψη τα θέματα όπως:
- Πότε αρχίζει να κινείται το αντικείμενο?
- Πόσο καιρό χρειάζεται για να μετακινηθεί το αντικείμενο από το ένα σημείο στο άλλο?
- Πότε και πόσο καιρό πρέπει να παραμείνει το αντικείμενο σε ένα δεδομένο σημείο?
Στο CSS3 Animation, το χρόνος μπορεί να οριστεί με το @keyframe σύνταξη. Αλλά, πριν μεταβείτε σε αυτό το τμήμα, ας καθορίσουμε πρώτα την αρχική θέση του κειμένου.
Έχουμε σχεδιάσει ότι το κείμενο θα ξεκινήσει από το δεξί και στη συνέχεια θα μετακινηθεί προς τα δεξιά. Έτσι, εδώ θα το τοποθετήσουμε πρώτα στα δεξιά κάνοντας χρήση της ιδιότητας Μετασχηματισμός CSS3.
.marquee p μετασχηματισμός: translateX (100%);
Θυμηθείτε, το 100% που έχουμε ορίσει για το στοιχείο της παραγράφου μας ήταν ίσο με τον γονέα του πλάτος. Έτσι, το ίδιο ισχύει και εδώ. το στοιχείο της παραγράφου θα είναι μεταφραστεί προς τα δεξιά για 100% η οποία σε αυτό το παράδειγμα είναι ίση με 500px.
Βασικά καρέ
ο @keyframe η σύνταξη μπορεί να είναι κάπως αινιγματική για μερικούς ανθρώπους, οπότε έχουμε δημιουργήσει έναν απλό οπτικό οδηγό που θα σας βοηθήσει να καταλάβετε εύκολα τι συμβαίνει στο @keyframe σύνταξη.
Κάντε κλικ εδώ για να δείτε τη μεγαλύτερη έκδοση.
Ολόκληρη η κίνηση θα διαρκέσει περίπου 20 δευτερόλεπτα και διαιρείται σε δύο διαδοχικές ακολουθίες 10 δευτερόλεπτα καθε.
Στην πρώτη σειρά, το πρώτο κείμενο θα μεταφερθεί αμέσως από τα δεξιά και θα παραμείνει ορατό στιγμιαία για να επιτρέψει στον χρήστη να διαβάσει το κείμενο, ενώ το δεύτερο κείμενο θα παραμείνει κρυμμένο. Στη δεύτερη σειρά, το πρώτο κείμενο της μαρκαρίδας θα μετακινηθεί προς τα αριστερά και το δεύτερο κείμενο θα μετακινηθεί αμέσως από τη δεξιά.
Και εδώ είναι όλοι οι κωδικοί των βασικών καρέ που πρέπει να εφαρμόσουμε για να τρέξουμε το κινούμενο σχέδιο.
@keyframes αριστερά-ένα 0% transform: translateX (100%); 10% μετασχηματισμός: translateX (0); 40% μετασχηματισμός: translateX (0); 50% μετασχηματισμός: translateX (-100%); 100% μετασχηματισμός: translateX (-100%); @frame κλειδιών αριστερά-δύο 0% transform: translateX (100%); 50% μετασχηματισμός: translateX (100%). 60% μετασχηματισμός: translateX (0); 90% μετασχηματισμός: translateX (0); 100% μετασχηματισμός: translateX (-100%);
ο αριστερά-ένα τα βασικά καρέ θα καθορίσουν την πρώτη ακολουθία της κινούμενης εικόνας, ενώ το αριστερά-δύο τα βασικά καρέ θα καθορίσουν τη δεύτερη σειρά.
Εφαρμογή της κινούμενης εικόνας στα στοιχεία
Για να λειτουργήσει η κινούμενη εικόνα, μην ξεχάσετε να εφαρμόσετε την κινούμενη εικόνα στο στοιχείο. Η πρώτη ακολουθία εφαρμόζεται για το πρώτο κείμενο ή στην περίπτωση αυτή για την πρώτη παράγραφο και η δεύτερη ακολουθία εφαρμόζεται και για τη δεύτερη παράγραφο.
.marquee p: nth-παιδί (1) animation: left-one 20s ευκολία άπειρη? .marquee p: nth-παιδί (2) animation: left-two 20s ευκολία άπειρη?
Είμαστε όλοι τελειωμένοι με το animation μας. ας δούμε τα αποτελέσματα στο πρόγραμμα περιήγησης.
- Διαδήλωση
- Λήψη πηγής
Δώρο
Μπορούμε επίσης να ορίσουμε το κείμενο της μαρκαρίσματος για να το μετακινήσουμε από πάνω προς τα κάτω ή αντίστροφα, όπως ακριβώς κάναμε στην προηγούμενη ανάρτησή μας. Εδώ είναι πώς να το κάνουμε. αντικαταστήστε τους παραπάνω κώδικες κινούμενων εικόνων με αυτόν τον παρακάτω παρακάτω μετακινήστε το κείμενο προς τα κάτω:
.marquee p μετασχηματισμός: translateY (-100%); @frameskey κάτω-ένα 0% μετασχηματισμός: translateY (-100%); 10% μετασχηματισμός: translateY (0); 40% μετασχηματισμός: translateY (0); 50% μετασχηματισμός: translateY (100%). 100% μετασχηματισμός: translateY (100%); @frame κλειδιών κάτω-δύο 0% transform: translateY (-100%); 50% μετασχηματισμός: translateY (-100%); 60% μετασχηματισμός: translateY (0); 90% μετασχηματισμός: translateY (0); 100% μετασχηματισμός: translateY (100%);
Παρατηρήστε ότι έχουμε αλλάξει το Άξονας Χ προς το Άξονας Υ και γυρίστε όλα τα μετάφραση αρνητική τιμή στο θετικό και αντίστροφα.
Εχουμε επισης μετονομάστηκε σε Animation προς το κάτω-ένα και κάτω-δύο, οπότε πρέπει να εφαρμόσουμε ξανά το όνομα Animation και στο στοιχείο paragraph.
.marquee p: nth-παιδί (1) animation: down-one 20s ευκολία άπειρη? .marquee p: nth-child (2) animation: down-two 20s ευκολία άπειρη?
Ή αλλιώς, αν θέλετε να το μετακινήσετε το αντίθετο? από κάτω προς τα πάνω. Ακολουθούν όλοι οι κωδικοί που πρέπει να εφαρμόσετε:
.marquee.up p μετασχηματισμός: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s ευκολία άπειρη? .marquee.up p: nth-child (2) animation: up-two 20s ευκολία άπειρη? @frameskey up-one 0% transform: translateY (100%); 10% μετασχηματισμός: translateY (0); 40% μετασχηματισμός: translateY (0); 50% μετασχηματισμός: translateY (-100%); 100% μετασχηματισμός: translateY (-100%); @frameskey-up δύο 0% transform: translateY (100%); 50% μετασχηματισμός: translateY (100%). 60% μετασχηματισμός: translateY (0); 90% μετασχηματισμός: translateY (0); 100% μετασχηματισμός: translateY (-100%);
- Διαδήλωση
- Λήψη πηγής
συμπέρασμα
Παρά την έλλειψη της τρέχουσας υποστήριξης του προγράμματος περιήγησης, το CSS3 Animation, αν γίνει σωστά, θα λύσει αναμφισβήτητα πολλά ζητήματα ευχρηστίας στο μέλλον, όπως κάναμε σε αυτό το παράδειγμα. Εάν χρειαζόμαστε μόνο ένα σύντομο κινούμενο σχέδιο που προορίζεται για σύγχρονα προγράμματα περιήγησης, η χρήση του CSS3 Animation είναι μάλλον καλύτερη από το να φορτώσετε ένα jQuery script.
Τέλος, γνωρίζουμε ότι αυτό το άρθρο μπορεί να είναι λίγο συντριπτικό για κάποιους ανθρώπους, οπότε αν έχετε οποιεσδήποτε απορίες σχετικά με αυτό το άρθρο, μπορείτε να το δημοσιεύσετε στην παρακάτω ενότητα σχολίων.
