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-direction property is used to specify the direction of a marquee (moving content).
CSS
marquee-direction: 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 specify that the content will be displayed 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
forward : This scrolls the content in the forward direction i.e. from right to left.
reverse : This scrolls the content in the reverse direction i.e. from left to right.
initial : Sets the default value.
inherit : Inherits the value of the parent element.
The marquee direction can be affected by the overflow-style and the direction properties which are given to the element as shown in the following table.
| overflow-style | direction | forward direction | reverse direction |
|---|---|---|---|
| marquee-line | ltr | right to left | left to right |
| marquee-line | rtl | left ot right | right to left |
| marquee-block | bottom to top | top to bottom |
In order to get support from Webkit-based browsers, you need to add the prefix -webkit- before the property. The prefixed values may be somewhat different from the ones listed above. The -webkit-marquee-directionproperty can take one of the follwoing values.
auto : This moves the content in the default direction. This is the defualt value.
forwards : This scrolls the content from left to right. This is the reverse of marquee-direction: reverse.
backwards : This scrolls the content from right to left. This is the reverse of marquee-direction: forward.
right : This scrolls the content from left to right.
left : This scrolls the content from right to left.
up : This scrolls the content from bottom to top.
down : This scrolls the content from top to bottom.
initial : Sets the default value.
inherit : Inherits the value of the parent element.
Example
In the following example, the second paragraph is given marquee-direction: backward which will make the text flow from left to right.
HTML
<p>This text moves in forward direction.</p>
<p id="marquee1">This text moves in backward direction.</p>
CSS
/* for all browsers */
#marquee1 {
overflow-x: marquee-line;
marquee-style: scroll;
marquee-direction: backward;
}
In the above code, writing overflow-x: marquee-line 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.
