HTML Marquee with complete reference

Last updated on May 26th, 2016 at 01:05 pm

HTML marquee are always the best way to showcase a website most important information / news in a scrolling format to the users. We have different options inside a tag which can make a content/image scroll in variety of directions and speed.

Here i will show you how to accomplish the marquee stuff in HTML along with instant DEMO.

For example, a simple marquee code will look like this
Your content OR .

<marquee>Your content OR <img src="PATH_TO_IMAGE"></marquee>.

Marquee Behavior
The behavior of a marquee indicates how the contents move. There are three different behaviors:
1)scroll
2)slide
3)alternate

The behavior of a marquee is identified by “behavior=” section of the code. Scrolling is the default behavior. When a marquee is set to “scroll,” it means that the text, image or other HTML content should scroll off the edge of the marquee area and then reappear on the other side.

The following is an example of a marquee set to “scroll”:
Text, Image or other HTML content.

<marquee behavior="scroll" direction="left">Text, Image or other HTML content</marquee>.

“Slide” marquee behavior is similar except it means that when the leading part of the text, image or other HTML content reaches the left edge, it will stop without scrolling off.

When the behavior is set to “slide,” it will look like this:
Text, Image or other HTML content.

<marquee behavior="slide" direction="left">Text, Image or other HTML content</marquee>.

“Alternate” marquee behavior makes the text, image or other HTML content bounce back and forth, remaining visible all the time (if it all fits).

When the marquee is set at “alternate,” it will look like this:
Text, Image or other HTML content.

<marquee behavior="alternate" direction="left">Text, Image or other HTML content</marquee>.

Marquee Directions
The HTML marquee can be tailored to scroll in different directions. In order to change the direction of the marquee, change the direction in the code from “left” to the word “right.” You may also change it to scroll up or down. To do this, you may change the direction of the HTML code to the word “up” or “down.”

For example, the code for a marquee scrolling to the left would be:
Text, Image or other HTML content.

<marquee behavior="scroll" direction="left">Text, Image or other HTML content</marquee>.

HTML Marquee Speed

The HTML marquee can also be displayed at three different speeds: slow, medium and fast. The speed is identified as “scrollamount” in the HTML marquee code. The “scrollamount” can be any number from 1 and up.

For example, the code for a slow scroll would be;
SLOW Text, Image or other HTML content.

<marquee behavior="scroll" direction="right" scrollamount="1">SLOW Text, Image or other HTML content</marquee>.

Medium scroll:
MEDIUM Text, Image or other HTML content.

<marquee behavior="scroll" direction="right" scrollamount="10">MEDIUM Text, Image or other HTML content</marquee>.

Fast scroll:
FAST Text, Image or other HTML content.

<marquee behavior="scroll" direction="right" scrollamount="20">FAST Text, Image or other HTML content</marquee>.

Scrolling Image
The HTML marquee is also used to scroll images in different directions. The URL of the image is added to the marquee code in the “image URL” section of the code. The direction can also be from “left” to “right,” or “up” or “down.”

For example, the code for a marquee image scrolling left would be:
.

<marquee behavior="scroll" direction="right"><img src= "Image_Path" /></marquee>.