Delighters.JS一款向下滚动页面触发css3动画JS插件
时间：2018-10-22 来源：风信官网 点击： 1075次
Delighters.JS是一款向下滚动页面，触发css动画。在插件的主要功能是监控页面的内容，当页面内容滚动到指定触发区域时，触发CSS3动画效果。
官方地址：https://q42.github.io/delighters/
github地址：https://github.com/Q42/delighters
使用指南
引入Delighters.JS文件
<script type="text/javascript" src="delighters.js">
HTML结构，在DIV中添加data-delighter>属性
<div class="foo" data-delighter>
CSS样式
内置的.started和 .ended类会自动为带data-delighter的元素（或它的子元素）添加样式。
当插件被加载之后，每一个data-delighter属性都会获得一个 .delighter class类。
/* when the library loads, each [data-delighter]
gets the .delighter class */
.foo.delighter {
transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
}
.started class类会在元素进入视口顶部0.75时添加到元素上。（最顶部为0，最底部为1）。
/* the .started class is set when the top
of [data-delighter] is at 0.75 of the viewport
(where 0 is top and 1 is bottom) */
.foo.delighter.started {
transform: none;
opacity: 1;
}
.ended class类会在元素进入底口顶部0.75时添加到元素上。（最顶部为0，最底部为1）。
/* an extra .ended state is set when the bottom
of [data-delighter] is at 0.75 of the viewport
(where 0 is top and 1 is bottom) */
.foo.delighter.started.ended {
border: solid red 10px;
}
自定义配置参数
通常情况下，插件会在DOM元素加载完毕之后自动加载。它的默认配置参数如下：
options = {
attribute: 'data-delighter',
classNames: ['delighter', 'started', 'ended'],
start: 0.75, // 默认启动阈值
end: 0.75, // 默认结束阈值
autoInit: true // 在DOMContentLoaded时初始化
}
你可以通过下面的方法来修改插件的默认配置参数：
Delighters.config({
// 在底部设置默认起始阈值
start: 1,
// 让我们稍后手动调用Delighters.init()
autoInit: false
// ... etc ...
})
