delighters.js 介绍
delighters.js是一款 页面 滚动触发css3动画js 插件 。该js 插件 可以在 页面 向下滚动时，为进入浏览器视口的元素制作各种炫酷的css3动画 效果 。
delighters.js使用
1、引入
<script type="text/JavaScript" src="js/delighters.js.js"></script>
2、html
在需要制作动画的元素上 添加 data-delighter 属性 。
<div> class="foo" data-delighter </div>
3、css
内置的.started和 .ended类会 自动 为带data-delighter的元素（或它的子元素） 添加 样式。
当 插件 被加载之后，每 一个 data-delighter都会获得 一个 .delighter class类。
.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;
}
网站地址 : https://q42.github.io/delighters/
GitHub: https://github.com/Q42/delighters
网站描述: 一款 页面 滚动触发css3动画js 插件
delighters.js官方网站
官方网站： https://q42.github.io/delighters/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。