Δημιουργία μετακινούμενου περιεχομένου σε HTML5 και CSS3 Χωρίς MARQUEE

Όσοι από εσάς γράφετε HTML για μεγάλο χρονικό διάστημα μπορεί να θυμάται το στοιχείο. Αυτό ήταν ένα συγκεκριμένο στοιχείο για το πρόγραμμα περιήγησης που δημιούργησε ένα banner μετακινούμενου κειμένου σε όλη την οθόνη. Αυτό το στοιχείο δεν προστέθηκε ποτέ στις προδιαγραφές HTML και η υποστήριξη για αυτό ποικίλλει ευρέως στα προγράμματα περιήγησης. Οι άνθρωποι συχνά είχαν πολύ ισχυρές απόψεις σχετικά με τη χρήση αυτού του στοιχείου - τόσο θετικού όσο και αρνητικού. Αλλά αν τον αγάπησα ή τον μισούσα, εξυπηρετούσε το σκοπό να κάνει το περιεχόμενο που ξεπέρασε τα όρια του κουτιού να είναι ορατό.

Μέρος του λόγου για τον οποίο δεν εφαρμόστηκε ποτέ πλήρως από τα προγράμματα περιήγησης εκτός από την ισχυρή προσωπική γνώμη ήταν ότι θεωρείται ένα οπτικό αποτέλεσμα και ως εκ τούτου δεν πρέπει να ορίζεται από το HTML, το οποίο ορίζει τη δομή. Αντ 'αυτού, τα οπτικά ή τα εφέ παρουσίασης πρέπει να διαχειρίζονται το CSS. Και το CSS3 προσθέτει τη λειτουργική μονάδα marquee για να ελέγξει τον τρόπο με τον οποίο τα προγράμματα περιήγησης προσθέτουν το αποτέλεσμα marquee στα στοιχεία.

Νέες ιδιότητες CSS3

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

υπερχείλισης
Η ιδιότητα στυλ υπερχείλισης (η οποία επίσης συζητήσαμε στην υπερχείλιση CSS του άρθρου) ορίζει το προτιμώμενο στυλ για περιεχόμενο που ξεχειλίζει το πλαίσιο περιεχομένου. Εάν ορίσετε την τιμή σε γραμμή marquee ή μπλοκ, το περιεχόμενό σας θα μετακινηθεί προς τα αριστερά / δεξιά (γραμμή γραμμής) ή προς τα επάνω / προς τα κάτω (μπλοκ μαρκαρίσματος).

στυλ μαρκετινγκ
Αυτή η ιδιότητα καθορίζει τον τρόπο μετακίνησης του περιεχομένου σε προβολή (και έξω).

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

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

marquee-play-count
Ένα από τα μειονεκτήματα της χρήσης του στοιχείου MARQUEE είναι ότι η μαρκίζα δεν σταματά ποτέ. Αλλά με την ιδιότητα περιουσιακού στοιχείου "marquee-play-count" μπορείτε να ρυθμίσετε το marquee να περιστρέφει και να απενεργοποιεί το περιεχόμενο για ένα συγκεκριμένο αριθμό φορών.

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

Λεπτομέρειες κατεύθυνσης

υπερχείλισης Γλώσσα Κατεύθυνση προς τα εμπρός ΑΝΤΙΣΤΡΟΦΗ
γραμμή γραμμών ltr αριστερά σωστά
rtl σωστά αριστερά
μπάρμπεκιου πάνω κάτω

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

Υποστήριξη προγράμματος περιήγησης για τις ιδιότητες του Marquee

Μπορεί να χρειαστεί να χρησιμοποιήσετε τα προθέματα προμηθευτών για να λειτουργήσουν τα στοιχεία του CSS marquee. Είναι ως εξής:

CSS3 Πρόθεμα προμηθευτή
υπερχείλιση-χ: γραμμή γραμμωτής γραμμής. υπερχείλιση-x: -webkit-marquee;
στυλ μαρκετινγκ -webkit-marquee-στυλ
marquee-play-count -webkit-marquee-repetition
κατεύθυνση μαρκαρίσματος: προς τα εμπρός | -webkit-marquee-κατεύθυνση: προς τα εμπρός | προς τα πίσω.
marquee-ταχύτητα -webkit-marquee-ταχύτητα
κανένα ισοδύναμο -webkit-marquee-προσαύξηση

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

Για να δουλέψετε το marquee σας, πρέπει πρώτα να τοποθετήσετε τις προρυθμισμένες τιμές του πωλητή και στη συνέχεια να τις ακολουθήσετε με τις τιμές προδιαγραφών CSS3. Για παράδειγμα, εδώ είναι το CSS για ένα marquee που μετατοπίζει το κείμενο πέντε φορές από αριστερά προς τα δεξιά μέσα σε ένα κιβώτιο 200x50.

{
πλάτος: 200px; ύψος: 50px; λευκό-διάστημα: τώρα;
υπερχείλιση: κρυφή;
υπερχείλιση-x: -webkit-marquee;
-webkit-marquee-κατεύθυνση: προς τα εμπρός.
-webkit-marquee-style: κύλιση;
-webkit-marquee-ταχύτητα: κανονική;
-webkit-marquee-προσαύξηση: μικρό?
-webkit-marquee-επανάληψη: 5;
υπερχείλιση-χ: γραμμή γραμμωτής γραμμής.
κατεύθυνση μαρκαρίσματος: προς τα εμπρός.
στυλ μαρκίζας: κύλιση.
marquee-speed: κανονική.
marquee-play-count: 5;
}}