Responsive High Performance Content Scroller - SuperMarquee

Responsive High Performance Content Scroller - SuperMarquee
File Size: 55.4 KB
Views Total: 241
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Marquee scrolling is a well-known effect discovered more than 20 years ago by web developers. It was initially used as a creative technique for an eye-catching presentation of text and graphics.

SuperMarquee is a JavaScript plugin that works to provide you with a highly aesthetic animated content scroller similar to the traditional marquee scrolling effect. It's made of pure CSS and JS with no images included, making it fully responsive and high performance.


  • Works with Vanilla JavaScript, jQuery, and Web Component.
  • Super smooth transition effects.
  • 3D transformations to help you create Star Wars Intro Text effect.
  • Horizontal & vertical scrolling.
  • Custom animation speed.
  • Auto play & pause on hover.
  • RTL support.
  • Licensed under The GPLv3 license.

How to use it:

1. Install & download.

$ npm i sp-supermarquee

2. Import the SuperMarquee.

// As an ES module
import SuperMarquee from "sp-supermarquee";
<!-- Vanilla JS -->
<script src="/path/to/dist/SuperMarquee.min.js"></script>
<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.supermarquee.min.js"></script>
<!-- Web Component -->
<script src="/path/to/dist/SuperMarqueeWC.min.js"></script>

3. Create a container to hold the scroller (Vanilla JS & jQuery Versions).

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

4. Initialize the SuperMarquee and define the content in the JavaScript as follows:

// Vanilla JavaScript
const myScroller = new SuperMarquee(
      document.getElementById( "supermarquee" ),
        "content" : "Text To Scroll..."

// jQuery
  "content" : "Text To Scroll..."

5. Or use it as a web component.

  content="Text To Scroll..."
  ... more props here ...

6. To customize the scroller, pass an object with the following options:


  // or "vertical"
  "type" : "horizontal",

  // "superslow", "slow"
  // "fast", "superfast"
  "speed" : "medium",

  // "ltr": left to right
  // "rtl": right to left
  // "btt": bottom to top
  // "ttb": top to bottom
  "direction" : "ltr",

  // "gapped", "pingpong"
  "mode" : "continuous",

  // delay in ms for pingping mode
  "pingPongDelay" : 2000,

  // "fixedTop", "fixedBottom"
  "position" : "custom",

  // e.g. "{\"z\": 400, \"rotateX\" : 30}", where
  // "z" : number, perspective in pixel, default: "none"
  // "originX" : number, originX in %, default: 50
  // "originY" : number, originY in %, default: 50
  // "rotateX" : number, transform:rotateX in degree, default: 0
  // "rotateY" : number, transform-rotateY in degree, default: 0
  // "rotateZ" : number, transform-rotateZ in degree, default: 0
  "perspective" : null,

  // pause on hover
  "pauseonhover" : false,

  // auto start on init
  "autostart" : true,

  // custom easing function
  "easing" : false,

  // scrolling text
  "content" : "SuperMarquee By Is Super !!!",

  // any character appended to the content
  "spacer" : null,

7. You can also pass the options via data-OPTION attributes:

  data-content="Text To Scroll">

8. API methods.

// play & resume the scroller;

// pause the scroller

// set content

// set animation speed

// false|"0" means disabled, true|"1" means enabled

// the perspective settings as serialized JSON string.

// destroy the instance



  • FIXED bug in configuration setting

This awesome jQuery plugin is developed by superplug-in. For more Advanced Usages, please check the demo page or visit the official website.