The Marquee behavior attribute in HTML is used to set the behavior of scrolling. The default value is scroll. When set to “slide,” it creates a sliding effect for the content, smoothly moving it horizontally or vertically based on the specified direction. This attribute is part of the <marquee> tag, which is used for creating scrolling text or images
Note: This attribute is depreciated from HTML5.
Syntax:
<marquee behavior=slide >Attribute value:
|
Attribute Value |
Description |
|---|---|
|
alternate |
It defines that text moving to the end and then starting in the opposite direction. |
|
scroll |
It has a default value. specify the text scrolls to the end and starts over. |
|
slide |
It specifies the text moving to the end and then stops it. |
Example: The implementation of the marquee attribute with an example.
<!DOCTYPE html><html>
<head>
<title>HTML Marquee behavior attribute</title>
<style>
.main {
text-align: center;
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<h1 style="color:green; text-align:center;">
GeeksforGeeks
</h1>
<div class="main">
<marquee class="marq"
bgcolor="Green"
direction="left"
behavior=scroll
loop="">
Scroll
</marquee>
<marquee class="marq"
bgcolor="Green"
behavior=alternate
direction="left"
loop="">
Alternate
</marquee>
</div>
</body>
</html>
|
Output:
Example: The implementation of marquee scroll attribute
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Marquee Slide Example</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Slide Behavior Marquee</h3>
<marquee behavior="slide"
direction="left" scrollamount="5">
This is a sliding marquee and
It will moves smoothly from right to left.
</marquee>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 1
- Microsoft Edge 12
- Firefox 65
- Opera 7.2
-
Safari 1.2