代码拉取完成,页面将自动刷新
Forked From Github graingert/WOW
本项目为山东远山科技有限公司为特殊需求修改的增强版,不建议个人项目使用,原项目建议使用AOS进行替代
根据页面滚动展示css动画, WOW.js Plus 在原项目的基础上增加了部分功能,以适配某些特殊场景使用。
使用数字来定义动画展示的顺序,并且可以通过配置修改展示间隔
<section class="animation__animated animation__fadeIn wow" data-wow-order="1"></section>
<section class="animation__animated animation__fadeIn wow" data-wow-order="2"></section>
<section class="animation__animated animation__fadeIn wow" data-wow-order="3"></section>
上述案例可以将三个模块顺序加入动画展示
new WOW({
orderDuration: 400
}).init()
修改动画间隔为400ms
bower install wow-mit
npm install wow.js
<section class="wow animate__animated animate__slideInLeft"></section>
<section class="wow animate__animated animate__slideInRight"></section>
new WOW().init();
<section class="wow animate__animated animate__slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow animate__animated animate__slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
<section class="wow animate__animated animate__slideInRight" data-wow-order="1" data-wow-iteration="10"></section>
<section class="wow animate__animated animate__slideInRight" data-wow-order="2" data-wow-iteration="10"></section>
var wow = new WOW(
{
boxClass: 'wow', // 应用wow的class
animateClass: 'animated', // 动画加载的类属性
offset: 0, // 触发动画的距离 默认为0
mobile: true, // 在移动设备上应用触发器 (默认开启)
live: true, // 异步加载内容 (默认开启)
callback: function(box) {
// Callback 将会在每次动画执行时运行
},
scrollContainer: null, // 手动选择滚器, null时为监听window
resetAnimation: true, // 在最后重置动画 (默认开启)
orderDuration: 200, // 排序展示动画间隔
}
);
wow.init();
原开发者为Matthieu Aussaguel, mynameismatthieu.com
Thomas Grainger进行二次维护,并于2016年启用
增强版为山东远山数字科技有限公司维护
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。