使用 scrollCue.js 让网站页面元素动起来！

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

安装