scrollCue.js 是一个无需 jQuery 即可运行的 JavaScript 插件。通过滚动显示元素。它适用于 Chrome、Firefox、Safari、Edge、IE11 等现代浏览器。示例：https://prjct-samwest.github.io/scrollCue/examples.html
scrollCue.js 是一个 JavaScript 库，当您向下滚动页面时，它会向元素应用超过 15 个以上 CSS3 驱动的显示动画。仅当元素的一部分在视口中可见时才会触发动画。
安装
从 npm 安装它或下载文件。
npm 安装
npm install scrollcue文件下载
https://github.com/prjct-samwest/scrollCue/archive/v2.0.0.zip
用法
添加 CSS 到<head>标签。
<link rel="stylesheet" href="scrollCue.css">在之前添加一个 JavaScript</body>标签。
<script src="scrollCue.min.js"></script>初始化scrollCue.js
<script>scrollCue.init();</script>标记示例
请参阅“示例”页面以了解其工作原理并测试动画。
标准
设置“data-cue”目标元素中的属性并指定动画类型。
<img src="001.jpg" data-cue="fadeIn">
<img src="002.jpg" data-cue="fadeIn">
<img src="003.jpg" data-cue="fadeIn">
<img src="004.jpg" data-cue="fadeIn">
<img src="005.jpg" data-cue="fadeIn">
<img src="006.jpg" data-cue="fadeIn">父元素包裹
您可以通过设置将其包装在父元素中“data-cue”属性。
<div data-cues="fadeIn"><img src="001.jpg"><img src="002.jpg"><img src="003.jpg"><img src="004.jpg"><img src="005.jpg"><img src="006.jpg">
</div>分组换行
您可以通过设置对目标元素进行分组“data-group”属性。
通过分组，当第一个元素被触发时，其余元素也会被顺序触发，而不管滚动量是多少。
<div data-cues="fadeIn" data-group="images"><img src="001.jpg">...<img src="008.jpg">
</div>示例
请参阅“示例”页面以了解其工作原理并测试动画。
[data-duration]
可以设置元素的显示时间（ms）
<div data-cues="fadeIn" data-duration="2000"><img src="001.jpg"><img src="002.jpg"><img src="003.jpg" data-duration="500"><img src="004.jpg" data-duration="500"><img src="005.jpg"><img src="006.jpg">
</div>[data-interval]
可以设置元素的显示间隔时间（ms）
<div data-cues="fadeIn" data-interval="-200"><img src="001.jpg"><img src="002.jpg"><img src="003.jpg" data-interval="1000"><img src="004.jpg" data-interval="-0.2"> <!-- 200ms --><img src="005.jpg"><img src="006.jpg">
</div>[data-delay]
可设置元素显示延迟时间（ms）
<div data-cues="fadeIn" data-delay="1000"><img src="001.jpg"><img src="002.jpg" data-delay="2000"><img src="003.jpg"><img src="004.jpg"><img src="005.jpg"><img src="006.jpg">
</div>[data-order]
您可以单独设置元素的显示顺序。
如果设置负数，则顺序将从后开始。
<div data-cues="fadeIn" data-group="images"><img src="001.jpg" data-order="-1"> <!-- 6 --><img src="002.jpg"> <!-- 3 --><img src="003.jpg"> <!-- 4 --><img src="004.jpg"> <!-- 5 --><img src="005.jpg" data-order="1"> <!-- 1 --><img src="006.jpg" data-order="2"> <!-- 2 -->
</div>[data-addClass]
您可以在显示元素时设置任何类名称。
<div data-cues="fadeIn" data-addClass="border foo bar"><img src="001.jpg"><img src="002.jpg" data-order="border-red"><img src="003.jpg"><img src="004.jpg" data-order="border-red"><img src="005.jpg"><img src="006.jpg">
</div>[data-sort=”reverse”]
您可以反转元素的显示顺序。
<div data-cues="fadeIn" data-group="images" data-sort="reverse"><img src="001.jpg"><img src="002.jpg"><img src="003.jpg"><img src="004.jpg"><img src="005.jpg"><img src="006.jpg">
</div>[data-sort=”random”]
您可以随机化元素的显示顺序。
<div data-cues="fadeIn" data-group="images" data-sort="random"><img src="001.jpg"><img src="002.jpg"><img src="003.jpg"><img src="004.jpg"><img src="005.jpg"><img src="006.jpg">
</div>动画类型
有 15 种不同的动画可供选择。您可以通过编辑slideCue.css来添加/自定义动画。点击此处了解详情
- ・fadeIn
- ・slideInLeft
- ・slideInRight
- ・slideInDown
- ・slideInUp
- ・zoomIn
- ・zoomOut
- ・rotateIn
- ・bounceIn
- ・bounceInLeft
- ・bounceInRight
- ・bounceInDown
- ・bounceInUp
- ・flipInX
- ・flipInY
- 淡入
- 向左滑动
- 向右滑动
- 向下滑动
- 向上滑动
- 放大
- 缩小
- 旋转输入
- 弹入
- 向左弹跳
- 右弹跳
- 向下弹跳
- 弹起
- 旋转X
- 翻转Y
选项
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
| 期间 | 数字 | 600 | 显示元素的时间。(ms) |
| interval（间隔） | 数字 | -0.7 | 显示并排元素的时间间隔。 您可以使用负数。（整数或实数） 整数： （多发性硬化症） 实数：前一个元素的持续时间百分比。 |
| percentage（百分比） | 数字 | 0.75 | 开始显示元素的屏幕高度百分比。（从0到1的实数） |
| enable（使能够） | 布尔值 | true | 站点加载时是否自动启动该进程。 如果为 false，则在可选时间调用scrollCue.enable(true)。 |
| docSlider（文档滑块） | 布尔值 | false | 与 docSlider.js 结合使用。 有关 docSiider.js 的更多信息。可以在这里找到。 |
| pageChangeReset（页面更改重置） | 布尔值 | false | 与 docSlider.js 结合使用。 每次更改页面时，动画都会重新播放。 |
例子
scrollCue.init({duration : 300,interval : -200,percentage : 0.8
});参考文档：https://prjct-samwest.github.io/scrollCue/document.html