Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/superplug-in/supermarquee

The super smooth marquee javascript component.
https://github.com/superplug-in/supermarquee

angular html5 javascript jquery marquee react supermarquee svelte vue webcomponent

Last synced: 3 days ago
JSON representation

The super smooth marquee javascript component.

Host: GitHub
URL: https://github.com/superplug-in/supermarquee
Owner: superplug-in
License: other
Created: 2022-01-19T09:06:43.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-08-15T09:25:19.000Z (about 2 years ago)
Last Synced: 2024-09-21T02:31:32.196Z (6 days ago)
Topics: angular, html5, javascript, jquery, marquee, react, supermarquee, svelte, vue, webcomponent
Language: JavaScript
Homepage:
Size: 170 KB
Stars: 25
Watchers: 3
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        ![SuperMarquee](./res/github/SuperMarqueeLogoWhiteBg.png)

![SupportedFrameworkIcons](./res/github/sp-supported-frameworks.jpg)

[![npm](https://img.shields.io/npm/dt/sp-supermarquee.svg)](https://npmjs.com/package/sp-supermarquee)

[![npm](https://img.shields.io/npm/dm/sp-supermarquee.svg)](https://npmjs.com/package/sp-supermarquee)

[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/sp-supermarquee/badge?style=rounded)](https://www.jsdelivr.com/package/npm/sp-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](https://superplug.in/supermarquee/showcase/breakingnews)

- [eCommere](https://superplug.in/supermarquee/showcase/ecommerce)

- [3D Hero](https://superplug.in/supermarquee/showcase/starwars)

- [MarqueeWall (codepen.io)](https://codepen.io/benny00100/pen/podybRG)

- [MarqueeWiggle (codepen.io)](https://codepen.io/benny00100/pen/JjObvZK)

## 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](https://superplug.in/supermarquee/demo/1)

- [Vertical Scrolling](https://superplug.in/supermarquee/demo/2)

- [Ping Pong](https://superplug.in/supermarquee/demo/3)

- [Perspective X axis](https://superplug.in/supermarquee/demo/4)

- [Perspective dynamic](https://superplug.in/supermarquee/demo/5)

- [Styling](https://superplug.in/supermarquee/demo/6)

- [Dynamic Scroll Speed](https://superplug.in/supermarquee/demo/7)

- [Mixed Content](https://superplug.in/supermarquee/demo/8)

- [Position](https://superplug.in/supermarquee/demo/9)

- [Live Updates](https://superplug.in/supermarquee/demo/10)

- [Performance](https://superplug.in/supermarquee/demo/11)

- [Right-To-Left](https://superplug.in/supermarquee/demo/12)

## Documentation

- [Getting Started with Javascript](https://superplug.in/supermarquee/docs#start-javascript)

- [Getting Started with jQuery](https://superplug.in/supermarquee/docs#start-jquery)

- [Getting Started with Web Component](https://superplug.in/supermarquee/docs#start-webcomponent)

- [Getting Started with Angular](https://superplug.in/supermarquee/docs#start-angular)

- [Getting Started with React](https://superplug.in/supermarquee/docs#start-react)

- [Getting Started with Svelte](https://superplug.in/supermarquee/docs#start-svelte)

- [Getting Started with Vue](https://superplug.in/supermarquee/docs#start-vue)

- [API Reference](https://superplug.in/supermarquee/docs#instantiation)

- [Changelog](https://superplug.in/supermarquee/docs#changelog)

- [Examples](https://superplug.in/supermarquee#demos)

## 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](https://www.jsdelivr.com/package/npm/sp-supermarquee).

### Create a placeholder

Create an HTML placeholder

```html



```

### Import SuperMarquee

```js

import SuperMarquee from "sp-supermarquee";

```

### Initialize 

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

```js

const sm = new SuperMarquee( 

  document.getElementById('example'), {

  content : "SuperMarquee by SuperPlug.in is Super!!!"

});

```

Refer to the [official documentation](https://superplug.in/supermarquee/docs) for more details.

## Support

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

If you use a non-commercial version then please ask your tagged question on [StackOverflow](https://stackoverflow.com/questions/tagged/supermarquee).

## 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](https://superplug.in/supermarquee#pricing).

- Commercial license with support and maintenance included. See [pricing plans](https://superplug.in/supermarquee#pricing).