delighters.js是一款页面滚动触发css3动画js插件。该插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的css3动画效果。
使用方法
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.delighter.started.ended {
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时初始化
}
也可以通过下面的代码修改默认配置参数:
扫描二维码关注公众号,回复:
14669268 查看本文章
Delighters.config({
// 在底部设置默认起始阈值
start: 1,
// 让我们稍后手动调用Delighters.init()
autoInit: false
// ... etc ...
})
记录一下写页面用到的动画插件