javascript WOW.js网站动画使用
1、引入WOW.js插件,搭配animated.css实现动画
<link rel="stylesheet" href="http://cdn.staticfile.org/animate.css/2.0/animate.min.css">
<script src="http://cdn.staticfile.org/wow/0.0.7/wow.min.js"></script>
2、页面元素使用
<div>
<p class="wow fadeInUp" style="padding-top: 0.36rem;"><img src="img/cp_03.png"></p>
<p class="wow fadeInUp" style="padding-top: 0.2rem;"><img src="img/cp_04.png"></p>
<p class="wow fadeInUp" style="padding-top: 0.2rem;"><img src="img/cp_05.png"></p>
</div>
3、可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">www.96net.com.cn</div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();