CSS Marquee: Explore Marquee Values & Speed

The famed HTML marquee tag was a non-standard HTML element whose text contents would scroll automatically (up, down, left or right). W3C recommended against the use of it in HTML. Instead, they recommend to use CSS properties to achieve the same effect. The CSS3 Marquee module describes how we can use CSS properties to achieve the same effect.

There are various properties which define the marquee behavior – how much content is displayed at a time, scroll direction, bidirectional scrolling, dependency on user events, etc.  The classic use of marquee is as a replacement for scrollbar, or when user interaction is limited.

List of marquee properties:

overflow-style

This property defines the scrolling method for elements when there is more content than available space to display the content.

Valid values are:

auto – The user agent defines the scrolling mechanism. This is the default value.

marquee-line – Marquee has horizontal scrolling behavior.

marquee-box – Marquee has vertical scrolling behavior.

 

marquee-style

This property defines the marquee style.

Valid values are:

scroll – This specifies the scrolling to start completely off one side and scroll all the way across and off the element.

side – This specifies the scrolling to start completely off one side and scroll all the way across and stop when there is no more content is off that side.

alternate – The behavior starts off as “side” behavior, but once content reaches the end, it starts scrolling in the reverse direction.

 

marquee-play-count

This property specifies the number of times the scrolling behavior is displayed. The default value is 1.

 

marquee-direction

This property specifies the initial direction in which the content moves.

Valid values are:

forward – this is the default behavior and specifies that the content moves in the normal reading order.

reverse – This specifies that the content moves in the opposite of the normal reading order.

 

marquee-speed

This property specifies the speed with which the content scrolls. The valid values are “slow”, “normal” and “fast” and are determined by the user agent. The CSS specification on requires that slow < normal < fast.

 

Example

li {overflow-style: auto; marquee-style: alternate; marquee-play-count: 2; marquee-direction: forward; marquee-speed: fast }

 

Summary

In this article, we learned about the various CSS3 specified properties to support the marquee effect. The implementation is still in progress and not supported by all browsers.

About the author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508

 

References

http://www.w3.org/TR/css3-marquee/