字幕滚动是20多年前网络开发人员发现的一种众所周知的效果。它最初被用作一种创造性的技术，用于引人注目的文本和图形展示。

SuperMarquee是一个JavaScript插件，它可以为您提供一个高度美观的动画内容滚动器，类似于传统的字幕滚动效果。它由纯CSS和JS组成，不包含任何图像，使其具有充分的响应能力和高性能。

特征：

• 可与Vanilla JavaScript、jQuery、React、Angular、Vue和Web组件配合使用。
• 超级平滑的过渡效果。
• 3D转换，帮助您创建《星球大战》简介文本效果。
• 水平和垂直滚动。
• 自定义动画速度。
• 悬停时自动播放和暂停。
• RTL支持。
• 根据GPLv3许可证获得许可。

如何使用它:

1.安装和下载。

# NPM
$ npm i sp-supermarquee

2.导入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.创建一个容器来容纳滚动条（Vanilla JS&jQuery版本）。

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

4.初始化SuperMarquee并在JavaScript中定义内容，如下所示：

// Vanilla JavaScript
const myScroller = new SuperMarquee(
      document.getElementById( "supermarquee" ),
      {
        "content" : "Text To Scroll..."
      }
);
 
// jQuery
$('#supermarquee').supermarquee({
  "content" : "Text To Scroll..."
});

5.或者将其用作web组件。

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

6.要自定义滚动条，请传递一个具有以下选项的对象：

$('#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.您也可以通过数据选项属性：

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

8.API方法。

// 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(); 

更新日志：

2022-08-15

• 2.0版本

2022-06-30

• v1.4.2:修复了Bug

2022-06-29

• v1.4.1:添加RSS提要模板逻辑

2022-04-01

• 第1.3版

2022-03-30

• 已修复配置设置中的错误

预览截图

响应式高性能内容滚动条 SuperMarquee