/ / / Δημιουργία κύλισης κειμένου HTML

Δημιουργία γραμμής ερπυσμού HTML

Για να δημιουργήσετε μια ερπυστική γραμμή HTML έχεικλείσιμο ετικέτας . Μπορεί να περιέχει όχι μόνο κείμενο, αλλά και άλλα στοιχεία: πίνακες, εικόνες, φόρμες και ούτω καθεξής. Χρησιμοποιώντας χαρακτηριστικά, ορίζεται μόνο η οριζόντια μετατόπιση, αλλά και η κάθετη. Για το τελευταίο, πρέπει να καθορίσετε το ύψος του πεδίου.

Είναι αρκετά ενδιαφέρον, αρχικάΔημιουργήθηκε για τον Internet Explorer, ενώ άλλοι έμαθαν να το καταλαβαίνουν αργότερα. Αν και συνήθως συμβαίνει το αντίθετο, και είναι το πρόγραμμα περιήγησης της Microsoft που λειτουργεί πάντα ως καθυστερημένο, δημιουργώντας πολλά προβλήματα για τους προγραμματιστές.

Κωδικός HTML

Συνάφεια

Το είναι μια ερπυστική ετικέτα γραμμής σε HTML. Υποστηρίζεται από όλες τις τρέχουσες εκδόσεις του προγράμματος περιήγησης. Από αυτήν την άποψη, δεν υπάρχουν προβλήματα και μπορείτε να το χρησιμοποιήσετε με ασφάλεια.

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

Ποιος είναι ο λόγος για αυτό;Στο σύγχρονο HTML, δεν υπάρχει καμία ερπυστική γραμμή, καθώς όλα τα κινούμενα σχέδια και το στυλ γίνονται από το CSS. Μερικές φορές πρέπει να χρησιμοποιήσετε το JS. Κατά συνέπεια, η HTML είναι υπεύθυνη μόνο για σήμανση. Ωστόσο, το θα λειτουργήσει μια χαρά, χάρη στη συνεχιζόμενη συμβατότητα με παλαιότερες εκδόσεις.

Σύνταξη

Σε HTML, μια ερπυστική γραμμή καθορίζεται από μια ετικέτα κλεισίματος:

 ... 

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

Καρδιά

Ταχύτητα κύλισης

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

 κάποιο κείμενο  

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

Εάν η ταχύτητα κύλισης είναι πολύ γρήγορη,ο αυτόματος περιορισμός θα ενεργοποιηθεί ώστε το κείμενο να παραμείνει αναγνώσιμο. Εάν πρέπει να ξεπεράσετε αυτόν τον περιορισμό, εισαγάγετε το χαρακτηριστικό truespeed. Σημειώστε ότι δεν το καταλαβαίνουν όλες οι εκδόσεις του προγράμματος περιήγησης. Το IE και ο Firefox μπορούν να λειτουργήσουν μαζί του.

Η καθυστέρηση μεταξύ κύλισης κειμένου μπορεί να οριστεί χρησιμοποιώντας το χαρακτηριστικό scrolldelay.

Πλαίσιο κύλισης

Το πλάτος της ετικέτας θα πάρει ολόκληρο το πλάτος του γονέαείδος. Και σε ύψος θα είναι ίσο με το περιεχόμενο μέσα. Για να το αλλάξετε αυτό, πρέπει να χρησιμοποιήσετε δύο χαρακτηριστικά που είναι υπεύθυνα για το ύψος και το πλάτος. Αυτά είναι ύψος και πλάτος αντίστοιχα. Μπορείτε να χρησιμοποιήσετε pixel ή ποσοστά.

Υπάρχουν επίσης δύο ακόμη χαρακτηριστικά, δηλαδή το hspace καιvspace. Είναι απαραίτητα για τη δημιουργία κενού χώρου γύρω από τη γραμμή υφέρπουσας ή μάλλον εσοχής. Η απόσταση ορίζεται οριζόντια και κάθετα, αντίστοιχα.

Παράμετροι κίνησης

Εκτός από την ταχύτητα, μπορείτε να ορίσετε και άλλαπαραμέτρους κίνησης. Το χαρακτηριστικό διεύθυνση είναι υπεύθυνο για το χαρακτηριστικό κατεύθυνσης. Από προεπιλογή, το κείμενο μετακινείται από δεξιά προς τα αριστερά. Αυτή η κίνηση αντιστοιχεί στην τιμή του δικαιώματος. Για να μετακινήσετε το κείμενο στην αντίθετη κατεύθυνση, απλώς καθορίστε αριστερά και θα μοιάζει με αυτό:

 ... 

Εκτός από την οριζόντια κύλιση, μπορείτε να ορίσετε κατακόρυφο. Χρησιμοποιήστε την τιμή προς τα πάνω για να μετακινήσετε το περιεχόμενο προς τα πάνω και προς τα κάτω για να το μετακινήσετε προς τα κάτω.

Για να αλλάξετε τη φύση του κινήματος, υπάρχουν δύο ακόμηενδιαφέρον και χρήσιμο χαρακτηριστικό. Μπορείτε να καθορίσετε τον αριθμό των κυλίνδρων μετά τις οποίες το περιεχόμενο θα σταματήσει στην ακραία του θέση και δεν θα μετακινηθεί. Αυτή η ιδιότητα αντιστοιχεί στο χαρακτηριστικό loop. Η προεπιλεγμένη τιμή είναι -1. Εάν οριστεί στο 0, το κείμενο δεν θα μετακινηθεί καθόλου. Ακέραιοι άνω του 0 θα ξεκινήσουν τον μετρητή.

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

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

Η τελευταία τιμή είναι διαφάνεια. Δίνει την εντολή στο περιεχόμενο να φτάσει στο τέλος και να σταματήσει.

HTML για σήμανση, CSS για στυλ

Στυλ

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

Το HTML δεν είναι αρκετό για να δημιουργήσει μια ωραία γραμμή ερπυσμού. Πρέπει να χρησιμοποιούνται στυλ. Για παράδειγμα, αν θέλουμε να κάνουμε το κείμενο πιο όμορφο:

 Σέρνεται γραμμή 

Εφαρμογή

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

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

Στην ερπυστική γραμμή, δεν είναι διαθέσιμο μόνο κείμενο

Αποτελέσματα

Καλύψαμε πώς να φτιάξουμε μια σκηνή σε HTML.Αυτή είναι μια αρκετά απλή μέθοδος που είναι εύκολο να μάθει. Ωστόσο, είναι ξεπερασμένο και δεν περνά επικύρωση. Δεν έλαβα περαιτέρω ανάπτυξη και υποστήριξη, κάτι που μπορεί να προκαλέσει προβλήματα στην εργασία σε διαφορετικά προγράμματα περιήγησης.

Το CSS είναι καλύτερο για κινούμενα σχέδια

Использовать его не рекомендуем.Για να δημιουργήσει μια ερπυστική γραμμή, ή μάλλον κινούμενη εικόνα γενικά, το CSS3 έχει αποκτήσει έναν μοναδικό κανόνα @keyframes. Σας επιτρέπει να δημιουργήσετε διαδοχικά καρέ κινούμενων σχεδίων. Και η ιδιότητα κινούμενης εικόνας καθορίζει ήδη τη ροή αυτής της πολύ κινούμενης εικόνας. Αυτή η εργαλειοθήκη παρέχει πολύ περισσότερες δυνατότητες από την παλαιά ετικέτα . Η χρήση του είναι επίσης πολύ πιο βολική, και το πιο σημαντικό πράγμα είναι αυτό που προσπαθούμε εδώ και πολλά χρόνια: να καθαρίσετε HTML από περιττά σκουπίδια και να το κάνετε πιο ευανάγνωστο και δομημένο.