Marquee is generally known as a text or something that keeps on floating from one side to the other side of the page. The same is created in HTML by using <marquee> tag.
Syntax:
<html>
<head>
<title>Example</title>
</head>
<body>
<marquee>Welcome to Ourtutorials!</marquee>
</body>
</html>
Output:
<marquee> tag is used with following five attributes:
Direction: It is used to specify the direction of flow. Default direction is left hence for a marquee to float left, direction attribute is not required. Possible values of direction attribute are: left, right, up and down.
Syntax:
<html>
<head>
<title>Example</title>
</head>
<body>
<marquee direction="left">Welcome to Ourtutorials!</marquee>
<br>
<marquee direction="right">Welcome to Ourtutorials!</marquee>
</body>
</html>
Output:
Behavior: It is used to specify whether the floating element has to scroll endlessly or to return back after hitting the boundary. It's possible values are scroll and alternate.
Syntax:
<html>
<head>
<title>Example</title>
</head>
<body>
<marquee behavior="scroll">Welcome to Ourtutorials!</marquee>
<br>
<marquee behavior="alternate">Welcome to Ourtutorials!</marquee>
</body>
</html>
Output:
Scrollamount: This attribute is used to specify the number of pixels the floating element should move at once. It's value can be any number.
Syntax:
<html>
<head>
<title>Example</title>
</head>
<body>
<marquee scrollamount="10">Welcome to Ourtutorials!</marquee>
<br>
<marquee scrollamount="20">Welcome to Ourtutorials!</marquee>
</body>
</html>
Output:
Onmouseover and Onmouseleave: These are basically JavaScript events that take JavaScript library functions this.stop() or this.start() as values. We use these attributes to make the floating element stop and start on mouse activities.
Syntax:
<html>
<head>
<title>Example</title>
</head>
<body>
<marquee onmouseover="this.stop()" onmouseleave="this.start()">Welcome to Ourtutorials!</marquee>
</body>
</html>
Output: [Hover your mouse on the text to experience the stop/start events.]