Tired of everyone and their mom telling you that MARQUEE is deprecated? What? You don't care? Well I do!

.marquee

I use Javascript and CSS Animation to recreate the magic of <MARQUEE>. The CSS animation specifically relies on transform to translate the marquee contents. Sorry, no scrolling here. Also no events, sadly.

I wouldn't put a border or padding on a .marquee element, it kinda ruins the whole thing. Use a wrapper for that. Here are the deets:

Get it

Copypasta your preference!

Put this in your head:

Download:

Or copy the code directly:

marquee.js

Creates an object marquee containing all the methods, elements, and CSS to setup .marquee.

marquee_setup.js

Could go anywhere in your regular script, as long as it's placed after every .marquee element. Works best before the load event.

Attributes

data-speed
Set the content's speed in pixels per second. Default is 72.

Classes

.marquee
This is pretty much all you need for your default right-to-left scrolling marquee. Every marquee must be initialized with this class.
.marquee-guts
This div is created automatically when a .marquee is initialized. You shouldn't put it directly in the HTML, but you can use CSS to style it. The .marquee-guts on this page have the following style: 
.marquee-guts {
  background: #ff04;
}
.marquee-guts .marquee-guts {
  background: #f0f4;
}

Direction

.left
Right to left (default)
.right
Left to right
.up
Bottom to top
.down
Top to bottom

Behavior

.scroll
Content scrolls off screen and back in from the other end (default).
.alt
Content bounces off walls.
.slide
Content slides into view.

Style variables

If you're new to CSS variables, just know that you can define your own variable in the style attribute like so: style="--delay:3s;".

--loop
How many times content scrolls. Default is infinite, except for .slide marquees where the default is 1.
--delay
How long should the page wait before starting to scroll. Default is 0s.
--hover
Decides the play-state when your mouse hovers over the marquee. Default is unset. If you want your marquee to pause on hover, set --hover: paused.

Examples

The borders around the marquees are for presentation purposes. .marquee does not support borders.

class="marquee"

Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text

class="marquee right"

Short text

class="marquee up"

Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text

class="marquee down"

Short text

class="marquee slide"

Short text

class="marquee right slide"

Short text

class="marquee up slide" style="height: 5em;"

Short text

class="marquee down slide" style="height: 5em;"

Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text

It doesn't really make sense to .slide vertically with long text.

class="marquee alt"

Short text

class="marquee right alt"

Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text

class="marquee up alt" style="height: 4rem;"

Short text

class="marquee down alt" style="height: 4rem;"

Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text

You can also combine .marquees to do the bouncy thing. Remember to set height to the vertical .marquee.

This works.

<div class="marquee down alt" style="height:100px;">
  <div class="marquee right alt">Boing</div>
</div>
Boing

This works too.

<div class="marquee right alt">
  <div class="marquee up alt" style="height:50px;">Boing</div>
</div>
Boing