Simple Marquee Like Content Scrolling In Vanilla JavaScript

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