HTML Marquee Element Tag

The HTML <marquee> tag is used for horizontally or vertically scrolling text or images on a web page.
Although the <marquee> tag is deprecated and not recommended for modern web design, it can be useful for simple animations. Alternatives to the <marquee> tag are CSS animations and JavaScript, which offer greater flexibility and better support across all browsers.

Basic Attributes of the <marquee> Tag

Here's how you can use the <marquee> tag with various attributes:

  • behavior: Specifies the scrolling behavior. Values can be "scroll" (continuous scrolling), "slide" (scrolls once), or "alternate" (scrolls back and forth).
  • direction: Specifies the scrolling direction. Values can be "left", "right", "up", or "down".
  • scrollamount: Specifies the speed of the scrolling. A higher value means faster scrolling.
  • scrolldelay: Specifies the delay before the scrolling starts.
  • loop: Specifies the number of times the scrolling should repeat. A value of -1 indicates infinite scrolling.

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

Examples of Using the <marquee> Tag

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

Scrolling Images

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




Modern Alternative: CSS Animations

Using CSS for scrolling text or images is a more modern and flexible approach. Here's an example of a CSS animation that mimics the <marquee> effect:

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.marquee {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  animation: marquee 10s linear infinite;
}
</style>
</head>
<body>

<div class="marquee">
  <p>WELCOME to IT PRESENT</p>
</div>

</body>
</html>

result:

WELCOME to IT PRESENT

Using CSS animations gives you better control over animations and ensures compatibility with all modern browsers.



Privacy Policy