Smooth Marquee-like Scroller With Pure JavaScript – Marquee3000

Preview:

Description:

Marquee3000 is a small, performant JavaScript scroller library which applies a smooth, configurable scrolling effect to any html content just like the obsolete <marquee> tag.

How to use it:

Install and import Marquee3000 into your project.

# NPM
$ npm install marquee3000 --save
# Bower
$ bower install marquee3000

import Marquee3k from 'marquee3000';

Or include the marquee3k.js directly.

<script src="marquee3k.js"></script>

Add your own inline elements (for example text, images, etc) to the scroller.

<div class="marquee3k">
  <h1>Content 1</h1>
  ...
</div>

Config the scroller with the following HTML attributes:

• data-speed: scrolling speed
• data-reverse: true = right to left
• data-pausable: true = auto pause on hover

<div class="marquee3k"
     data-speed="0.25"
     data-reverse="false"
     data-pausable="false">
     <h1>Content 1</h1>
     ...
</div>

Initialize the Marquee3000 and done.

Marquee3k.init()

API methods.

// Refresh scrollers
Marquee3k.refreshAll();
// Refresh a specific scroller
Marquee3k.refresh(index); // index of marquee