Simple Marquee Like Content Scrolling In Vanilla JavaScript

Category: Animation , Javascript | March 19, 2021
Author:mattiacoll
Views Total:719 views
Official Page:Go to website
Last Update:March 19, 2021
License:MIT

Preview:

Simple Marquee Like Content Scrolling In Vanilla JavaScript

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();

You Might Be Interested In:


Leave a Reply