Marquee

Add smooth marquees to your site. Customize speed, direction, and style for dynamic announcements, promotions or content.

Copy the Marquee <script> and paste into the <head> of your page.

<!-- [WebTricks by CodeRaccoons] - Marquee --> <script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/Marquee.js"></script>

Required attributes

Marquee Container

Attribute to add

Namewt-marquee-element
Valuecontainer

Instructions

Assign this attribute to the element that will act as the marquee container.

How does it look?

Marquee Container example

Optional attributes

OptionalMarquee Direction

Attribute to add

Namewt-marquee-direction
Valueleft (default), right, top, bottom

Instructions

Set this attribute to control the scroll direction of the marquee.

How does it look?

Marquee Direction example
OptionalMarquee Speed

Attribute to add

Namewt-marquee-speed
Value50

Instructions

Set this attribute to control the scroll speed of the marquee. The lesser the faster, 50 is the default value.

How does it look?

Marquee Speed example

Working examples

 See the Pen  Marquee by Code Raccoons (@jorchie)  on CodePen.