Responsive High Performance Content Scroller - SuperMarquee

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.

Features:

• Works with Vanilla JavaScript, jQuery, React, Angular, Vue, 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
$ 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
$('#supermarquee').supermarquee({
  "content" : "Text To Scroll..."
});

5. Or use it as a web component.

<super-marquee 
  content="Text To Scroll..."
  ... more props here ...
  > 
</super-marquee>

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

$('#supermarquee').supermarquee({

  // 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 SuperPlug.in Is Super !!!",

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

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

<div 
  id="supermarquee"
  data-type="horizontal"
  data-speed="medium"
  data-content="Text To Scroll">
</div>

8. API methods.

// play & resume the scroller
myScroller.play();

// pause the scroller
myScroller.pause(); 

// set content
myScroller.setScrollContent(content);  

// set animation speed
myScroller.setScrollSpeed(speed); 

// false|"0" means disabled, true|"1" means enabled
myScroller.setPauseOnHover(String|Bool);

// the perspective settings as serialized JSON string.
myScroller.setPerspective(perspective); 

// destroy the instance
myScroller.destroy(); 

Changelog:

2022-08-15

• v2.0

2022-06-30

• v1.4.2: Bugs fixed

2022-06-29

• v1.4.1: ADDED RSS feed template logic

2022-04-01

• v1.3

2022-03-30

• 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.