插件描述：delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时，为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
使用方法
在页面中引入delighters.js.js文件。
1 | <script type="text/javascript" src="js/delighters.js.js"></script> |
HTML结构
在需要制作动画的元素上添加data-delighter属性。
1 | <div> class="foo" data-delighter </div> |
CSS样式
内置的.started和 .ended类会自动为带data-delighter的元素（或它的子元素）添加样式。
当插件被加载之后，每一个data-delighter都会获得一个 .delighter class类。
1 2 3 4 5 | .foo.delighter { transition: all .3s ease-out; transform: translateX(-100%); opacity: 0;} |
.startedclass类会在元素进入视口顶部0.75时添加到元素上。（最顶部为0，最底部为1）。
1 2 3 4 | .foo.delighter.started { transform: none; opacity: 1;} |
.endedclass类会在元素进入底口顶部0.75时添加到元素上。（最顶部为0，最底部为1）。
1 2 3 | .foo.delighter.started.ended { border: solid red 10px;} |
自定义配置参数
通常情况下，插件会在DOM元素加载完毕之后自动加载。它的默认配置参数如下：
1 2 3 4 5 6 7 | options = { attribute: 'data-delighter', classNames: ['delighter', 'started', 'ended'], start: 0.75, // 默认启动阈值 end: 0.75, //默认结束阈值 autoInit: true // 在DOMContentLoaded时初始化} |
你可以通过下面的方法来修改插件的默认配置参数：
1 2 3 4 5 6 7 | Delighters.config({ // 在底部设置默认起始阈值 start: 1, // 让我们稍后手动调用Delighters.init() autoInit: false // ... etc ...}) |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： MDUI多主题调色盘
- 下一个特效： jqueryPagination 增加输入页码跳转