Marquee Tag
Here’s are some example of how to use <marquee> tag in HTML:
Scroll Up
Example:
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>Output:
Scroll Down
Example:
<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>Output:
Scroll Left to Right
Example:
<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to right.
</marquee>Output:
Scroll Right to Left
Example:
<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to left.
</marquee>Output:
Scrolling Speed
Marquee speed can be changed using the “scrollmount” attribute. For example, if you are using scrollmount="1" then it sets the marque to scroll very slowly, and as you increase the “scrollmount,” the scrolling speed will also increase.
Example:
<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast Scrolling</marquee>Output:
Blinking Text within Marquee
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of a blinking text using CSS within a marquee</title>
<style>
.blink {
animation: blinker 1.5s linear infinite;
color: red;
font-family: sans-serif;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<marquee class="blink">This is an example of blinking text using CSS within a marquee.</marquee>
</body>
</html>
This is an example of blinking text using CSS within a marquee.
Output: