Creating Scrollable Content in HTML5 and CSS3 Without MARQUEE

Woman looking at wall with code

Stanislaw Pytel / Getty Images

Those of you who have been writing HTML for a long time may remember the element. This was a browser-specific element that created a banner of scrolling text across the screen. This element was never added to the HTML specification and support for it varied widely across browsers. People often had very strong opinions about the use of this element — both positive and negative. But whether you loved or hated it, it did serve the purpose of making content that overflowed the box boundaries visible.

Part of the reason it was never fully implemented by browsers, aside from strong personal opinion, was that it is considered a visual effect and as such, it shouldn’t be defined by the HTML, which defines the structure. Instead, visual or presentation effects should be managed by CSS. And CSS3 adds the marquee module to control how browsers add the marquee effect to elements.

New CSS3 Properties

CSS3 adds five new properties to help control how your content displays in the marquee: overflow-style, marquee-style, marquee-play-count, marquee-direction and marquee-speed.

The overflow-style property (which we also discussed in the article CSS Overflow) defines the preferred style for contents that overflows the content box. If you set the value to marquee-line or marquee-block your content will slide in and out to the left/right (marquee-line) or up/down (marquee-block).

This property defines how the content will move into view (and out). The options are scroll, slide, and alternate. Scroll starts with the content completely off screen, and then it moves across the visible area until it is all completely off screen again. Slide starts with the content completely off screen and then it moves across until the content has fully moved onto the screen and there is no more content left to slide on the screen. Lastly, alternate bounces the content from side to side, sliding back and forth.

One of the drawbacks of using the MARQUEE element is that the marquee never stops. But with the style property marquee-play-count you can set the marquee to rotate the content on and off for a specific number of times.

You can also choose the direction that the content should scroll on the screen. The values forward and reverse are based on the directionality of the text when the overflow-style is marquee-line and up or down when the overflow-style is marquee-block.

Marquee-Direction Details

overflow-style Language Direction forward reverse
marquee-line ltr left right
rtl right left
marquee-block up down

This property determines how quickly the content scrolls on the screen. The values are slow, normal, and fast. The actual speed depends upon the content and the browser displaying it, but the values must be slow is slower than normal which is slower than fast.

Browser Support of the Marquee Properties

You may need to use vendor prefixes to get the CSS marquee elements to work. They are as follows:

CSS3 Vendor Prefix
overflow-x: marquee-line; overflow-x: -webkit-marquee;
marquee-style -webkit-marquee-style
marquee-play-count -webkit-marquee-repetition
marquee-direction: forward|reverse; -webkit-marquee-direction: forwards|backwards;
marquee-speed -webkit-marquee-speed
no equivalent -webkit-marquee-increment

The last property allows you to define how large or small the steps should be as the content scrolls on screen in the marquee.

In order to have your marquee working, you should place the vendor prefixed values first and then follow them with the CSS3 specification values. For example, here is the CSS for a marquee that scrolls the text five times from left to right inside a 200x50 box.

width: 200px; height: 50px; white-space: nowrap;
overflow: hidden;
-webkit-marquee-direction: forwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: forward;
marquee-style: scroll;
marquee-speed: normal;
marquee-play-count: 5;
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Creating Scrollable Content in HTML5 and CSS3 Without MARQUEE." ThoughtCo, Sep. 30, 2021, Kyrnin, Jennifer. (2021, September 30). Creating Scrollable Content in HTML5 and CSS3 Without MARQUEE. Retrieved from Kyrnin, Jennifer. "Creating Scrollable Content in HTML5 and CSS3 Without MARQUEE." ThoughtCo. (accessed March 22, 2023).