Marquee is an effect which is used to scroll some content of an HTML element horizontally or vertically. The content can be anything like some text or an image.
The marquee-style property is used to style a marquee (moving content). It can be used to scroll, slide in or bounce the content.
CSS
marquee-style: value;
While using marquee, sometimes the moving content of an element cannot be fit inside the element. In that case, the overflow property is used to hide the overflowing content. Also, the overflow-style property can be used to display the content as a marquee by taking one of the two values - marquee-line (creates horizontal marquees) and marquee-block (creates vertical marquees).
This property is not fully supported by W3C.
Values
scroll : This scrolls the content from one end of the element of which it is part of to its other end. After it disappears off the other side, it again starts scrolling. This is the default value.
slide : This slides in the content from one end of the element it is part of and then stop sliding once all the content has appeared.
alternate : The content scrolls from one end to another and then bounce back and forth.
initial : Sets the default value.
inherit : Inherits the value of the parent element.
In order to get support from Webkit-based browsers, you need to add the prefix -webkit- before the property. The values given to the prefixed property may be somewhat different from the ones listed above. The -webkit-marquee-style property can take one of the following values.
none : This doesn't move the content.
scroll : This scrolls the content from one end of the element of which it is part of to its other end. After it disappears off the other side, it again starts scrolling. This is the default value.
slide : This slides in the content from one end of the element it is part of and then stop sliding once all the content has appeared.
alternate : The content scrolls from one end to another and then bounce back and forth.
initial : Sets the default value.
inherit : Inherits the value of the parent element.
Example
In the following example, the first paragraph is given marquee-style: scroll and thus its text wil continuously scrolls from the right end of the paragraph to its left end, whereas the second paragraph is given marquee-style: alternate which will make its text bounce back and forth.
HTML
<p id="marquee1">This text scrolls in forward direction.</p>
<p id="marquee2">This text moves back and front.</p>
CSS
/* for Chrome and Safari */
#marquee1 {
overflow-x: -webkit-marquee;
-webkit-marquee-style: scroll;
}
#marquee2 {
overflow-x: -webkit-marquee;
-webkit-marquee-style: alternate;
}
/* for all */
#marquee1 {
overflow-x: marquee-line;
marquee-style: scroll;
}
#marquee2 {
overflow-x: marquee-line;
marquee-style: alternate;
}
In the above code, writing overflow-x: marquee-line or overflow-x: -webkit-marquee is equivalent to writing overflow-style: marquee.
Browser Support
The marquee module is excluded by the W3C from the CSS3 specification. Since this property is not fully supported by W3C, therefore it is recommended not to use this property.
