Supermarquee

About

SuperMarquee is the super smooth marquee web component for your web applications.

It covers all features for marquee usages, like horizontal- and vertical scrolling, different scroll speeds, custom styling etc.

In addition, SuperMarquee comes with features which no other solution have. This includes 3D hardware acceleration, inbuilt 3D transformation functionalities and the unique ping-pong mode.

Needless to say that SuperMarquee supports all your favourite frontend frameworks.

Showcase

Get some inspiration of what is possible with the following showcase demos.

• Newsticker
• eCommere
• 3D Hero
• MarqueeWall (codepen.io)
• MarqueeWiggle (codepen.io)

Features

The most popular features of SuperMarquee:

  ✓  Fully Responsive. Perfect for every resolution
  ✓  Easily customizable via CSS
  ✓  Zero dependencies
  ✓  Lightweight, simple yet powerful
  ✓  Hardware accelerated for high performance
  ✓  Extremely flexible. Endless possibilities
  ✓  Works on every modern device
  ✓  Supports 3D transformations
  ✓  Works with every major frontend framework
  ✓  Visual editor and code generator
  ✓  RSS feed support

Examples

List of single feature examples

• Horizontal Scrolling
• Vertical Scrolling
• Ping Pong
• Perspective X axis
• Perspective dynamic
• Styling
• Dynamic Scroll Speed
• Mixed Content
• Position
• Live Updates
• Performance
• Right-To-Left

Documentation

• Getting Started with Javascript
• Getting Started with jQuery
• Getting Started with Web Component
• Getting Started with Angular
• Getting Started with React
• Getting Started with Svelte
• Getting Started with Vue
• API Reference
• Changelog
• Examples

Get Started

Install with npm

Run the following command in your terminal

npm install sp-supermarquee

You can also load the bundle directly from jsDelivr.

Create a placeholder

Create an HTML placeholder

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

Import SuperMarquee

import SuperMarquee from "sp-supermarquee";

Initialize

Now turn your placeholder into a SuperMarquee instance and let the magic begin.

const sm = new SuperMarquee( 
  document.getElementById('example'), {
  content : "SuperMarquee by SuperPlug.in is Super!!!"
});

Refer to the official documentation for more details.

Support

We provide support for developers working with commercial version by email. Please write an email to [email protected] (please include your license key for verification).

If you use a non-commercial version then please ask your tagged question on StackOverflow.

License

SuperMarquee is a commercial software with two licenses available:

• Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
• Commercial license with support and maintenance included. See pricing plans.