Author: | tjenkinson |
---|---|
Views Total: | 38 views |
Official Page: | Go to website |
Last Update: | January 20, 2023 |
License: | MIT |
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 = ' • '; 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(() => { // ... });