<link rel="stylesheet" href="https://esm.sh/@erikt/ui/marquee.css" />Default
Each set of items is its own <ul>. Repeat the
list once more with aria-hidden="true" so it's hidden
from assistive tech but fills in the loop as the first list scrolls
out.
- Design
- Engineering
- Product
- Marketing
- Support
<div class="marquee">
<ul>
<li><span class="badge">Design</span></li>
<li><span class="badge">Engineering</span></li>
<li><span class="badge">Product</span></li>
</ul>
<!-- repeat the same list, hidden from assistive tech -->
<ul aria-hidden="true">
<li><span class="badge">Design</span></li>
<li><span class="badge">Engineering</span></li>
<li><span class="badge">Product</span></li>
</ul>
<ul aria-hidden="true">
<li><span class="badge">Design</span></li>
<li><span class="badge">Engineering</span></li>
<li><span class="badge">Product</span></li>
</ul>
</div>Reverse
Add reverse to scroll right to left.
- Design
- Engineering
- Product
- Marketing
- Support
<div class="marquee reverse">
<ul>
...
</ul>
<ul aria-hidden="true">
...
</ul>
<ul aria-hidden="true">
...
</ul>
</div>Speed
Override --marquee-duration to control how long one
full loop takes. Shorter durations scroll faster.
- Fast
- Faster
- Fastest
<div class="marquee" style="--marquee-duration: 6s">
<ul>
...
</ul>
<ul aria-hidden="true">
...
</ul>
<ul aria-hidden="true">
...
</ul>
<ul aria-hidden="true">
...
</ul>
</div>Logos
Any content works inside the <li> items.
- A
- B
- C
- D
- E
- F
<div class="marquee">
<ul>
<li><img src="/logo-a.svg" alt="Company A" /></li>
<li><img src="/logo-b.svg" alt="Company B" /></li>
</ul>
<ul aria-hidden="true">
<li><img src="/logo-a.svg" alt="Company A" /></li>
<li><img src="/logo-b.svg" alt="Company B" /></li>
</ul>
</div>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Direction | .reverse |
Scrolls the other way |
| Duration | --marquee-duration: 20s |
Time for one full loop |
| Gap | --marquee-gap: 1.5rem |
Space between items |