HTML Marquee behavior attribute
Last Updated :
16 Jan, 2024
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:Â
|
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.
html
<!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
HTML
<!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
Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...