How to Scroll text in HTML

Scroll text in HTML

Inserting scrolling text on a web page, whether on a website, a blog, or an eBay ad, can allow you to attract the attention of your visitors, provided of course not to abuse it. Here are the steps to follow.

[summary]

The tag

Reminder : it is this coded indication, written between <> that will allow you to format your text, to make it adopt such or such behavior. For more detailed explanations, see the introduction to the article on The general structure of an (X) HTML page .
Here, it is a question of scrolling the text located between the opening tag <marquee> and the closing tag </marquee>. By default, if you do not enter any attributes, the text scrolls from right to left, disappearing once it reaches the end of the line and reappearing on the other side.

Coded
<marquee>Le texte à faire défiler</marquee>
Result
The text to scroll

Attributes

**Definition

An attribute is an instruction contained inside a tag and whose purpose is to provide additional information on how this tag should be interpreted.
[...]
Each tag corresponds to a set of attributes; certain attributes can be used by different tags. (Source: "Attribute" , on the Dico du Net).
Regarding the <marquee> marked <marquee> tag, it is possible to configure many elements, which modify the way the text scrolls.

** Scroll type

It is controlled by the behavior attribute.

• Scrolling : "scroll"

This is the default mode, in which the text scrolls from right to left.
<marquee behavior="scroll">Le texte défile</marquee>
Text scrolls

• Alternate scrolling : "alternate"

Text comes and goes right and left.
<marquee behavior="alternate">Le texte va et vient </marquee>
Text comes and goes

• Slide: "slide"

The text slides from right to left and stops when it reaches the end of the line.
<marquee behavior="slide">Le texte glisse</marquee>
Text slides

** Scroll direction

The direction attribute defines in which direction the text scrolls.

• To the right : "right"

<marquee direction="right">Le texte défile vers la droite </marquee>
Text scrolls to the right

• To the left : "left"

<marquee direction="left">Le texte défile vers la gauche</marquee>
Text scrolls to the left

• Up : "up"

<marquee direction="up">Le texte défile vers le haut</marquee>
Text scrolls up

• Down : "down"

<marquee direction="down">Le texte défile vers le bas</marquee>
Text scrolls down

** Scroll speed

The scrollamount attribute defines the speed at which the text moves, expressed in pixels. The higher the number of pixels, the faster the speed.

• Very slow

<marquee scrollamount="1">Le texte se déplace très lentement>
Text moves very slowly

• Average

<marquee scrollamount="5">Le texte se déplace un peu plus rapidement</marquee>
Text moves a little faster

• Fast

<marquee scrollamount="10">Le texte se déplace rapidement</marquee>
Text moves quickly

• Very fast

<marquee scrollamount="20">Le texte se déplace très rapidement</marquee>
Text moves very quickly

** Scrolling area

It is possible to define its size (height, width) as well as its color.

• Height : height

The higher the number, expressed in pixels, the greater the height.
<marquee direction="up" height="20">Zone de défilement basse></marquee>
Low scrolling area <marquee direction="up" height="100">Zone de défilement haute></marquee>
High scrolling area

• Width : width

<marquee width="50">Zone de défilement étroite</marquee>
Narrow scrolling area
<marquee width="400">Zone de défilement plus large</marquee>
Wider scrolling area

• Color : bgcolor

It is possible to use the name of the colors in English or their hexadecimal code: for the correspondence between the two, see our table on HTML color codes . 

<marquee bgcolor="orange">Zone de défilement orange</marquee>
Orange scroll area

As with any type of text, it is also possible to configure the font, color, size, layout, etc. : on these aspects, see our article on text formatting in HTML .