Author: | mattiacoll |
---|---|
Views Total: | 1,464 views |
Official Page: | Go to website |
Last Update: | June 7, 2022 |
License: | MIT |
Preview:

Description:
The Vanilla JavaScript version of the jQuery Marquee Plugin.
This is a vanilla JavaScript-powered marquee replacement that applies a smooth, configurable, horizontal/vertical scrolling animation to any content.
Great for showcasing products, breaking news, featured posts in a rolling manner.
How to use it:
1. Install and import the Vanilla Marquee component.
# NPM $ npm i vanilla-marquee
import maqruee from 'vanilla-marquee'
// Browser <script type="module"> import marquee from './dist/vanilla-marquee.min.js'; </script>
2. Create a new instance of the Vanilla Marquee and determine the selector of the container.
<h2 id="demo"> Content Here </h2>
const myScroller = new marquee(document.getElementById("demo"), { // options here })
3. Set the direction of the marquee animation: ‘left’ (default), ‘right’, ‘up’, or ‘down’.
const myScroller = new marquee(document.getElementById("demo"), { direction: 'right' })
4. Customize the marquee animation with the following options.
const myScroller = new marquee(document.getElementById("demo"), { // CSS easing css3easing: 'linear', // time to wait before starting the animation delayBeforeStart: 1000, // dulicate the content to create a continuous flow duplicated: false, // duration of animation duration: 5000, // space between tickers gap: 20, // pause on hover pauseOnHover: false, // re-calculate on window resize recalcResize: false, // animation speed speed: 0, // if is visibile from thestart startVisible: false, })
5. API methods.
// pause myScroller.pause(); // resume myScroller.resume(); // toggle between pause and resume myScroller.toggle(); // destroy the instance myScroller.destroy();
Changelog:
v1.1.2 (06/07/2022)
- Bugfix