Author: | tjenkinson |
---|---|
Views Total: | 514 views |
Official Page: | Go to website |
Last Update: | March 13, 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/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 = ' • '; 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.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