Responsive High Performance Content Scroller - SuperMarquee
File Size: | 153 KB |
---|---|
Views Total: | 2447 |
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.
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.