JavaScript

JavaScript

delighters.js是一款页面滚动触发css3动画js插件。该插件可以在页面向下滚动时，为进入浏览器视口的元素制作各种炫酷的css3动画效果。

官网地址

GitHub地址

使用方法

1.在页面引入delighters.js的JavaScript文件(文件内容可以在GitHub下载)

<script type="text/javascript" src="js/delighters.js.js"></script>

2.在需要动画的元素添加data-delighter属性

<div class="foo" data-delighter></div>

3.设置data-deltghter之后，每个元素都会有额外的类名。
当其顶部进入到浏览器视口75%以上时会有.started为元素添加样式；
当其底部进入到浏览器视口75%时会有.ended为元素添加样式。
（默认配置为75%，可以修改）

/*设置想要的样式*/
.foo.delighter {transition: all .3s ease-out;transform: translateX(-100%);opacity: 0;
}

.startedclass类会在元素进入视口顶部0.75时添加到元素上。（最顶部为0，最底部为1）。

/*简单理解为 开始时的样式*/
.foo.delighter.started {transform: none;opacity: 1;
}

.endedclass类会在元素进入底口顶部0.75时添加到元素上。（最顶部为0，最底部为1）。

/*简单理解为 结束时的样式*/
.foo.ded {border: solid red 10px;
}

从上面可以看出来，如果要使用delighters.js插件，样式会相对比较灵活，但是需要自己手动写较多的css样式

自定义参数

通常情况下，插件会在DOM元素加载完毕之后自动加载。默认配置如下：

options = {attribute:  'data-delighter',classNames: ['delighter', 'started', 'ended'],start:      0.75, // 默认启动阈值end:        0.75, //默认结束阈值autoInit:   true  // 在DOMContentLoaded时初始化
}

也可以通过下面的代码修改默认配置参数：

fig({    // 在底部设置默认起始阈值start: 1,// 让我们稍后手动调用Delighters.init()autoInit: false // ... etc ...
})

记录一下写页面用到的动画插件