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.
A "fake" marquee with broader support
@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)