Marquee.js

Drop-in infinite marquee. Include marquee.css + marquee.js, add a class, done.

Download marquee.zip

Horizontal — default

JackI've never seen anything like this before.
JillI'm speechless. This is amazing.
JohnSimple, fast, and it just works.
JaneClean design, out of the box.
JennyThis changed how our team works.

Horizontal — reverse, faster

NoahWow, blown away by the quality.
EmmaHighly recommend to any team.
JamesDoes exactly what it says.
AvaFeels premium, works flawlessly.
LeoExactly the tool we needed.

Vertical — multiple columns, mixed direction & speed

Col 1Forward, slow.
Col 1Great onboarding flow.
Col 1Support team is fantastic.
Col 1Worth every penny.
Col 2Reverse, medium speed.
Col 2Ship faster with this.
Col 2No complaints at all.
Col 2Rock solid reliability.
Col 3Forward, fast.
Col 3Beautiful attention to detail.
Col 3Our users love it too.
Col 3Would buy again in a heartbeat.

Usage

<link rel="stylesheet" href="marquee.css">
<script src="marquee.js" defer></script>

<div class="marquee"
     data-direction="horizontal"   <!-- horizontal | vertical -->
     data-reverse="false"          <!-- true | false -->
     data-speed="40"               <!-- px per second -->
     data-gap="16"                 <!-- px between items -->
     data-pause-on-hover="true">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
</div>

<!-- Multiple marquees on one page just work — each is initialized
     independently, so you can mix directions, speeds, and reverse
     settings freely, including many side-by-side vertical columns. -->