Back to post

SuperMarquee is a JavaScript scroller plugin that creates various types of scroller animations for the web component and the text. It is super flexible and fully responsive supported on all major browsers and devices.

Features:

Installation

npm install sp-supermarquee

How to use it:

1. Include the Javascript SuperMarquee.min.js at the bottom of the web page.

<script src="js/SuperMarquee.min.js"></script>

2. Add the basic HTML to the page.

<div id="supermarquee"></div>

3. Initialize the plugin and we're ready to go. 

const myScroller1 = new SuperMarquee(
    document.getElementById( "supermarquee" ),
    {
      "content" : "Text To Scroll...",
    }
);

Horizontal Scrolling

HTML structure

<div id="supermarquee"></div>

Script

const myScroller1 = new SuperMarquee(
    document.getElementById( "supermarquee" ),
    {
      "content" : "Text To Scroll...",
    }
);

Vertical Scrolling

HTML structure

<div id="vertical"></div>

Script

const myScroller2 = new SuperMarquee(
    document.getElementById( "vertical" ),
    {
      "content" : "Text To Scroll...",
      "type" : "vertical"
    }
);

3D Scrolling

HTML structure

<div id="vertical-3d"></div>

Script

const myScroller3 = new SuperMarquee(
  document.getElementById( "vertical-3d" ),
  {
    "content" : "Text To Scroll...",
    "type" : "vertical", "perspective" : "{\"z\": 400, \"rotateX\" : 30}"
  }
);

Perspective Scrolling

HTML structure

<div id="perspective"></div>

Script

let lastTime = (new Date()).getTime(),
currentTime = 0,
counter = 0;
const myScroller4 =  new SuperMarquee(
    document.getElementById( "perspective" ),
    { "content" : "Text To Scroll...","type" : "horizontal", "perspective" : "{\"z\": 400, \"rotateY\" : 60}" }
);
function loop() {
    window.requestAnimationFrame( loop );
    currentTime = ( new Date() ).getTime();
    delta = ( currentTime - lastTime ) / 2000;
    myScroller4.setPerspective( "{ \"rotateY\" : " + 60 * Math.sin( delta ) + "}" );
}
loop();