HTML Marquee Element Tag

The HTML MARQUEE tag is used for horizontally or vertically scrolling text or images on web page. Using the marquee attributes, we can command how text and images will scrol.
There are a few attributes you can use:

  • behavior: Specifies the scrolling behavior, which can be "scroll", "slide", or "alternate".
  • direction: Specifies the scrolling direction, which can be "left", "right", "up", or "down".
  • scrollamount: Specifies the speed of the scrolling.
  • scrolldelay: Specifies the delay before the scrolling starts.
  • loop: Specifies the number of times the scrolling should repeat. A value of -1 indicates an infinite loop.

In the following examples, using the DIRECTION attribute, we will show examples of scrolling text and images.

Marquee Text in HTML

Scrolling text to left side using by attribute direction="left"

<marquee direction="left" scrollamount="20">
   <p>WELLCOME to IT PRESENT</p>
</marquee>

result:

WELLCOME to IT PRESENT


JSFiddle

Scrolling text to right side using by attribute direction="right"

<marquee direction="right" scrollamount="20">
   <p>WELLCOME to IT PRESENT</p>
</marquee>

result:

WELLCOME to IT PRESENT




Scrolling text to up using by attribute direction="up"

<marquee direction="up">
   <p>WELLCOME to IT PRESENT</p>
</marquee>

result:

WELLCOME to IT PRESENT

Scrolling text to down using by attribute direction="down"

<marquee direction="down">
   <p>WELLCOME to IT PRESENT</p>
</marquee>

result:

WELLCOME to IT PRESENT

Scrolling text left side to right side and opposite using by attribute behavior="alternate"

<marquee behavior="alternate" scrollamount='20'>
<p>WELLCOME to IT PRESENT</p>
</marquee>



result:

WELLCOME to IT PRESENT

Bounce text using by attributes direction="down" and behavior="alternate"

<marquee direction="up" height="300" behavior="alternate">
<marquee behavior="alternate">
<p>WELLCOME</p>
</marquee>
</marquee>

result:

WELLCOME


JSFiddle

Marquee Images in HTML

Scrolling images to left side using by attribute direction="left"

<marquee direction='left' scrollamount='25'>
<img src="heart.jpg">
<img src="heart.jpg">
<img src="heart.jpg">
<img src="heart.jpg">
<img src="heart.jpg">
<img src="heart.jpg">
</marquee>


result:





JSFiddle







Privacy Policy