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/" ></script>
Copy Script

Required attributes

Optional
Defines the container element for the marquee.
Attribute to add
Name
wt-marquee-element
Value
container
Instructions

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

How does it look?
Optional
Defines the direction of the marquee scrolling.
Attribute to add
Name
wt-marquee-direction
Value
left (default), right, top, bottom
Instructions

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

How does it look?
Optional
Defines the speed of the marquee scrolling.
Attribute to add
Name
wt-marquee-speed
Value
50 (default)
Instructions

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

How does it look?

Optional Attributes

No items found.

Working examples

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