动画插件wow.js的使用方法

305 阅读1分钟

Github地址: github.com/daneden/ani… 体验地址:daneden.github.io/animate.css… wow.js:www.delac.io/wow/

html
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

data-wow-duration(动画持续时间);data-wow-delay(动画延迟时间);data-wow-offset(元素的位置露出后距离底部多少像素执行);data-wow-iteration(动画执行次数)

js
<script type="text/javascript">
	var wow = new WOW({
	boxClass: 'wow', //‘wow’需要执行动画的元素的 class
	animateClass: 'slideInLeft',//‘slideInLeft’animation.css 动画的 class
	offset: 0,//距离可视区域多少开始执行动画
	mobile: true,//是否在移动设备上执行动画
	live: true  //异步加载的内容是否有效
	});
	wow.init();
	// new WOW().init();不需要自己配置时加入的js
</script>