Dynamic Marquee-like Text Scroller In Vanilla JavaScript

Preview:

Description:

A modern marquee JavaScript library to help you create responsive, customizable, dynamic, horizontal/vertical text scrollers.

Can be helpful in creating an auto-scrolling ticker to showcase recent posts, breaking news, and featured content on your website.

How to use it:

1. Install and import the dynamic marquee component.

# NPM
$ npm i dynamic-marquee

// ES6 Module
import { Marquee } from 'dynamic-marquee';
// Browser (CDN)
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

2. Create a DIV container to hold the text scroller.

<div id="marquee"></div>

3. Create a new Marquee instance.

// ES6 Module
const marquee = new Marquee(document.getElementById('marquee'), {
      // options here
});
// Browser
const Marquee = dynamicMarquee.Marquee(document.getElementById('marquee'), {
      // options here
});

4. Appen an item to the scroller.

const $item = document.createElement('div');
$item.textContent = 'Breaking News 1';
marquee.appendItem($item);

5. Loop through a set of items.

loop(
  marquee,
  [
    function () {
      return 'Breaking News 1';
    },
    function () {
      return 'Breaking News 2';
    },
    function () {
      return 'Breaking News 3';
    },
    function () {
      return 'Breaking News 4';
    },
  ],
  function () {
    var $separator = document.createElement('div');
    $separator.innerHTML = '&nbsp•&nbsp';
    return $separator;
  }
);

6. Set the direction of the text scroller. Default: horizontal.

const marquee = new Marquee(document.getElementById('marquee'), {
      upDown: true, // vertical
});

7. Set the scroll rate in px.

const marquee = new Marquee(document.getElementById('marquee'), {
      rate: 20,
});

// OR
marquee.setRate(-20);

8. Determine whether to start the text scroller when it is visible on the screen.

const marquee = new Marquee(document.getElementById('marquee'), {
     startOnScreen: true,
});

9. Reset the text scroller.

marquee.clear();

10. Event handlers.

marquee.onItemRemoved(($el) => {
  // ...
});
marquee.onAllItemsRemoved(() => {
  // ...
});