Smooth Marquee-like Scroller With Pure JavaScript – Marquee3000

Category: Animation , Javascript , Recommended | October 27, 2017
Author: ezekielaquino
Views Total: 3,174
Official Page: Go to website
Last Update: October 27, 2017
License: MIT

Preview:

Smooth Marquee-like Scroller With Pure JavaScript – Marquee3000

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

You Might Be Interested In:


Leave a Reply