marquee6k
Super smooth, lightweight vanilla JavaScript marquee library.
No dependencies. High performance.
LIGHTWEIGHT • SMOOTH • PERFORMANT • ZERO DEPENDENCIES •
SCROLL LEFT • SCROLL RIGHT • ANY CONTENT •
Implementation
How to add a marquee
A simple drop-in setup: add a .marquee6k element with a single child wrapper,
set optional attributes, include the script, then call marquee6k.init().
If you load images or webfonts, initialize on load (or call marquee6k.refreshAll() after assets finish loading).
1: Script + Init
Include the script before
</body> and call marquee6k.init() (use load if assets affect size).
2: HTML + Config
Add
class="marquee6k" and wrap your content in a single child element (required). Optional attributes:
data-speed, data-direction, data-axis,
data-reverse, data-pausable, data-tap-pause,
data-scrubbing, data-scrub-momentum.
3: Styling
Control the gap between repeats with CSS on
.marquee6k__copy.
Drop-in example
HTML
<style>
.marquee6k__copy { padding-right: 48px; }
</style>
<div class="marquee6k" data-speed="0.25" data-direction="left" data-pausable="true">
<div>Hello marquee • Hello marquee •</div>
</div>
<!-- Place before </body> -->
<script src="marquee6k.js"></script>
<script>
window.addEventListener('load', () => marquee6k.init());
</script>