Simple HTML animation with marquee

We use the marquee tag to perform a simple animation on a web page. How to animate an image or make moving text only with HTML.

This article is for people who only work with HTML when making web pages and who want to incorporate a simple type of animation into their sites. An easy solution to make an animation with HTML is to make use of Marquee. Not long ago we received an email from Carlos López Schmidt in which he suggested a trick to animate images on web pages using marquee. Since we did not have explanations about the HTML tag anywhere, we have dedicated ourselves to writing this text that gives more detailed specifications and advice about the tag. In any case, we must thank Carlos for the inspiration to write these lines.

is one of those non-standard HTML tags, which is supported by most common browsers, but is not included in the HTML specifications. It is used to animate elements within the page. Specifically, it allows the content that we put inside the label, be it text, photographs, or both, to move horizontally on the page.

The marquee tag can be used to make animations on simple pages, without any knowledge of programming languages ​​or other similar complications. For those who only know HTML it is a perfect tool if you want to make a page element move.

But be careful, even though I am discussing this trick to move text around the page or images, we have to use the marquee very carefully, since it has disadvantages:

• Marquee is not included in the HTML standards
• Using the Marquee may have accessibility issues, that is, it may be difficult to read for certain people with disabilities.
• Animating elements on a page promotes dynamism and helps draw attention to certain messages or images, but using marquee in many places can cause confusion and make the user dizzy.

To use marquee, we simply place the content that we want to move, whether it is text, images or any other type of content, inside the label. Something like this:

text that moves

But we could also put something like this:

This table is scrolled, with all the contents of the table

Marquee supports a number of attributes to modify its behavior or appearance. They are the following:

WIDTH

Canopy width. If we do not mark height, it will be placed on the next line, as in a different paragraph. If we mark a width, the marquee will try to appear on the same line where we have placed it. If there is no space for it, the consequent line break will be made to show it a little lower.

DIRECTION

Where we want the content of the marquee to scroll to. Possible values ​​are “LEFT” and “RIGHT”.

BEHAVIOR

It is the behavior of the marquee, among the possible ones: SCROLL (the default behavior) indicates that it must always scroll in the same direction and ALTERNATE, which indicates that it scrolls to one side and to the other alternately .

SCROLL DELAY

It is the time in milliseconds that has to pass between each change in the position of what is moving. That is, the higher the value, the more milliseconds it takes for the marquee to move. The default value is 85, but if, for example, we set a value of 500, the marquee will change state (it will scroll the content) every half second.

SCROLLAMOUNT

This is the amount of pixel that the content of the marquee has to scroll each time it is moved. The higher the scrollamount, the more the marquee will scroll in each movement and therefore the animation will be faster. The default value is 6. We can try placing a higher value and we will see that the movement will be more “bumping”.

LOOP

The number of cycles to move the text or whatever is inside the marquee. This attribute only works in Internet Explorer. The default is INFINITE, which means that it will scroll all the time without stopping. But if, for example, we put a value like 3, it means that the marquee will only perform three cycles or movements and then it will stop.

BGCOLOR

The background color of the marquee. Accepts the name of an HTML color or an RGB value of that color.

HSPACE and VSPACE

These two attributes are used to define the number of pixels that should appear between the marquee and other page content, horizontally and vertically.

Some examples of marquees:

Canopy to the right and with width

text that scrolls

You can start on a separate page.