December 14th, 2011

Marquee, where have you been!?

Oh, the good times, when all we had were 256 colors, table-layouts and of course the marquee tag and his friend blink. The tags have been made obsolete in HTML5, but the good news is that marquee has returned in CSS3 (Seriously, see the spec).

An example

Most unfortunately the marquee css stuff is currently Safari/Chrome only.

Very real and functioning marquee, without the tag! (for alternate to work we need a very long text here and that's why this text is so long!)

Direction: Style: Speed:

True css marquee

A "fake" marquee with broader support

This is quite a fake marquee and doesn't work as well. But has the advantage of being stoppable.

Faking it with @keyframes animation. This one has to advantage that you can stop it (try hovering)

How does it work?

Defining marquees is quite easy, you set a container element to overflow: hidden and add overflow-x: -webkit-marquee and that's it. You can specify the followin marquee properties:

-webkit-marquee-direction: The direction in which the marquee should run
-webkit-marquee-increment: The amount per iteration the marquee should move into the set direction
-webkit-marquee-repetition: The numer of marquee repetitions (remember: infinity is a number too!)
-webkit-marquee-speed: The speed of the marquee movement
-webkit-marquee-style: The style of movement

A word on compatibility

We've tested the marquee example in Chrome and Safari (5.1). Also, the webkit syntax seems to differ a little bit from the W3C specs, so no guarantees that this will still work in the future.

Show us the source!

Feel free to look around the different source files we used for this example.

The css
The javascript (only needed for the marquee switching)