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/dynamic-marquee@2"></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,{
  // The value of this will be provided back to you in onItemRequired.
  metadata: null,
  // If true the item will snap to the end of the neighbouring item instead of starting off screen.
  snapToNeighbour: false,
});

marquee.onItemRequired(({ touching }) => {
  // For convenience if you have an item ready to go you can just return it
  // in place of `marquee.appendItem($item);`
  // If the new item would be touching another then `touching`
  // will be set to an object that contains `$el` and `metadata` of
  // the item it will be touching.
  // This can be used to determine if a separate should be added.
  // See loop.js for an example.
  return $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. Get the number of items.

marquee.getNumItems();

11. Event handlers.

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

Changelog:

v2.6.5 (12/12/2024)

• Use getBoundingClientRect instead of getComputedStyle

v2.6.4 (09/13/2024)

• Resync the slider when zoom changes

v2.6.2 (03/13/2023)

• update package

v2.6.0 (03/12/2023)

• implement api to get item size
• implement getGapSize

v2.5.0 (03/07/2023)

• added snapToNeighbour option

v2.4.1 (03/05/2023)

• use all: unset css to prevent any style conflicts

v2.3.13 (03/05/2023)

• bugfixes

v2.3.9 (03/04/2023)

• calculate new offsets before deciding if another item is needed
• revert change to shrink if item gets smaller