Example of a blinking text using CSS within a marquee

Scroll text html tag

HTML-элемент используется для создания на странице прокручивающегося текста (бегущей строки).

Атрибут

Описывает поведение прокрутки. Допустимые значения: scroll , slide и alternate . Если значение не указано, то используется scroll .

Задаёт цвет фона (можно использовать имя цвета или шестнадцатеричное значение).

Задаёт направление прокрутки. Допустимые значения: left , right , up и down . Если значение не указано, то используется left .

Задаёт высоту в пикселях или процентах.

Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку

Задаёт сдвиг на каждом шаге в пикселях. По умолчанию 6.

Задаёт интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут truespeed .

По умолчанию значения меньше 60 в scrolldelay игнорируются. Однако, если присутствует truespeed , то они не игнорируются

Задаёт вертикальный отступ (margin) в пикселях или процентах.

Задаёт ширину в пикселях или процентах.

Обработчики событий

Срабатывает, когда marquee достиг конечного состояния. Срабатывает только в случаях, когда behavior имеет значение alternate .

Срабатывает, когда marquee прокрутился столько раз, сколько было задано в атрибуте loop . Срабатывает только тогда, когда атрибут loop имеет положительное значение.

Срабатывает в начале прокрутки.

Методы

Запускает прокрутку marquee.

Останавливает прокрутку marquee.

Examples

marquee>This text will scroll from right to leftmarquee> marquee direction="up">This text will scroll from bottom to topmarquee> marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> marquee behavior="alternate"> This text will bounce marquee> marquee> 

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 17 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Marquee Tag

Marquee is one of the important tags introduced in HTML to support such scrollable texts and images within a web page. In this tutorial, you will be learning about the Marquee tag and its different attributes for developing a well-groomed static website.

The Marquee Tag

The tag is a container tag of HTML is implemented for creating scrollable text or images within a web page from either left to right or vice versa, or top to bottom or vice versa. But this tag has been deprecated in the new version of HTML, i.e., HTML 5.

The different attributes of tag are:

Here’s are some example of how to use tag in HTML:

Scroll Up

 This is a sample scrolling text that has scrolls in the upper direction. 

Scroll Down

 This is a sample scrolling text that has scrolls texts to down. 

Scroll Left to Right

 This is a sample scrolling text that has scrolls texts to right. 

Scroll Right to Left

 This is a sample scrolling text that has scrolls texts to left. 

Scrolling Speed

Marquee speed can be changed using the «scrollmount» attribute. For example, if you are using scrollmount=»1″ then it sets the marque to scroll very slowly, and as you increase the «scrollmount,» the scrolling speed will also increase.

Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

Marquee can also be implemented using CSS. Read the CSS Marquee chapter to learn more about it.

Blinking Text Within Marquee

         
Источник
 
HTML Tag
 
The is a non-standard HTML tag which was used to create a scrolling text or an image. It was used to make the text or image scroll horizontally across or vertically down the web page. Because of its usability problems it was often compared with Netscape’s blink element.
 
Alternatives of the HTML tag
 
As it was said above, the HTML tag is deprecated, and the developers often avoid using it. Nowadays, you can achieve the same result with the help of CSS and Javascript. Read our snippet to learn more about this method.
 
Syntax
 
The tag comes in pairs. The content is written between the opening () and closing () tags.
 
Example of using HTML tag:
 
html> html> head> title>Title of the document title> style> marquee< font-size: 30px; font-weight: 800; color: #8ebf42; font-family: sans-serif; > style> head> body> marquee>A scrolling text created with HTML Marquee element. marquee> body> html>
 
Use direction attribute of element to change the direction of the text/image. See another example where the text scrolls from up to down.
 
Example of a scrolling text:
 
html> html> head> title>Title of the document title> head> body> marquee direction="down">A scrolling text created with HTML Marquee element. marquee> body> html>
 
Now let’s see an example of using element for setting a scrolling image:
 
Example of a scrolling image:
 
html> html> head> title>Title of the document title> head> body> marquee behavior="scroll" direction="up"> img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" /> marquee> body> html>
 
Example of creating a scrolling text with HTML tag:
 
html> html> head> title>Title of the document title> head> body> style> marquee < width: 100%; padding: 10px 0; background-color: lightblue; > style> marquee direction="scroll">This scrolling text is created with HTML Marquee element and styled with CSS properties. marquee> body> html>
 
Attributes
 
The following attributes can be used to adjust the appearance of the element. 
 
 
 
Attribute
 
Value
 
Description
 
  
 
 
behavior
 
scroll
slide
alternate
 
Defines the scrolling type.
 
 
 
bgcolor
 
rgb(x,x,x)
#xxxxxx
colorname
 
Is used to give a background color.
 
 
 
direction
 
up
down
left
right
 
Sets the direction for the scrolling content.
 
 
 
height
 
pixels
%
 
Defines the marquee’s height.
 
 
 
hspace
 
pixels
 
Defines horizontal space around the marquee.
 
 
 
loop
 
number
 
Defines how many times the content will scroll. If we don’t define this, the content will scroll forever.
 
 
 
scrollamount
 
number
 
Defines the scrolling amount at each interval in pixels. Default value is 6.
 
 
 
scrolldelay
 
seconds
 
Defines how long delay will be between each jump. The default value is 85 and smaller amounts than 60 will be ignored.
 
 
 
truespeed
 
seconds
 
Is used to delay the scroll lesser than 60.
 
 
 
vspace
 
pixels
 
Defines vertical space around the marquee.
 
 
 
width
 
pixels
%
 
Defines the marquee’s width.
 
 
 
 
 
How to style tag?
 
Common properties to alter the visual weight/emphasis/size of text in tag:
 
 
CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
 
CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
 
CSS font-size property sets the size of the font.
 
CSS font-weight property defines whether the font should be bold or thick.
 
CSS text-transform property controls text case and capitalization.
 
CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
 
 
Coloring text in tag:
 
 
CSS color property describes the color of the text content and text decorations.
 
CSS background-color property sets the background color of an element.
 
 
Text layout styles for tag:
 
 
CSS text-indent property specifies the indentation of the first line in a text block.
 
CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
 
CSS white-space property specifies how white-space inside an element is handled.
 
CSS word-break property specifies where the lines should be broken.
 
 
Other properties worth looking at for tag:
 
 
CSS text-shadow property adds shadow to text.
 
CSS text-align-last property sets the alignment of the last line of the text.
 
CSS line-height property specifies the height of a line.
 
CSS letter-spacing property defines the spaces between letters/characters in a text.
 
CSS word-spacing property sets the spacing between words.
 
 
Источник
 
HTML Scrolling Text
 
This page contains HTML code for creating scrolling text.
 
You can create scrolling text in HTML using the tag, or you can create CSS scrolling text (the preferred method). You can make your text scroll from right to left. You can make it scroll left to right. You can make it bounce back and forth. You can make it scroll up or down. You can even make your text zoom in from the side and stay in the same place.
 
CSS Method — Right to Left
 
Here’s the recommended method of scrolling text. See CSS scrolling text if you need to scroll from left to right or vertically.
 
Right to Left
 
When I created this page, it was way back before CSS animations were a thing. Back then, the HTML tag was the only reliable way to get text to scroll. Only problem is that the tag is actually non-standard HTML
 
Therefore, I recommend that you use the CSS method above, or see CSS Scrolling Text or CSS Marquee for more examples of the CSS method.
 
However, for those so inclined, the remaining examples on this page use the (non-standard) tag.
 
To make your text scroll left (i.e. from right to left), use behavior=»scroll» and direction=»left» . Like this:
 
 
 
Source Code
 
Result
 
 
 
Here is some scrolling text. right to left!
 
 
 
Left to Right
 
To make your text scroll right (i.e. from left to right), use behavior=»scroll» and direction=»right» . Like this:
 
 
 
Source Code
 
Result
 
 
 
Here is some scrolling text. left to right!
 
 
 
Scroll Up
 
To make your text scroll up (i.e. from bottom to top), use behavior=»scroll» and direction=»up» . Like this:
 
 
 
Source Code
 
Result
 
 
 
Here is some scrolling text. going up!
 
 
 
Scroll Down
 
To make your text scroll down (i.e. from top to bottom), use behavior=»scroll» and direction=»down» . Like this:
 
 
 
Source Code
 
Result
 
 
 
Here is some scrolling text. going down!
 
 
 
Speed
 
You can change the scrolling speed of your marquee. For example, scrollamount=»1″ sets the marquee to a very slow scroll, while scrollamount=»20″ will make it faster. You can use whatever number you like though. Like this:
 
 
 
Source Code
 
Result
 
 
 
Very slow. Faster. Fast. Lightning!
 
 
 
Falling Text
 
Here’s a little trick that creates scrolling text that falls like snow.
 
To use this, change the bit that reads Scrolling text. to the text that you want to scroll. You can also change any of the other settings to modify how the text falls, how high the falling text is, etc.
 
Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text. Scrolling text.
 
More Marquee Codes
 
You can do much more with HTML marquees than is covered on this page. Here’s the full list of marquee codes on this website:
 
Marquee Generator
 
Marquee Usability
 
Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully 🙂
 
Источник
 
Читайте также:  Remove quotes in string python
   
 
Оцените статью
 
 
 
 
 
     
    
Вам также может понравиться
 
 
Ящики с усами python
pandas.plotting.boxplot# Make a box-and-whisker plot
 
 
 
Пример использования свойства CSS table-layout.
table-layout¶ Свойство table-layout определяет, как
 
 
 
Пример использования свойства CSS table-layout.
HTML Размеры таблицы HTML таблицы могут иметь разные
 
 
 
Пример использования свойства CSS table-layout.
table-layout¶ Свойство table-layout определяет, как
 
 
   
 
 
 
Правообладателям
 
Политика конфиденциальности
 
Контакты