javascript WOW.js网站动画使用

本文主要是介绍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();

这篇关于javascript WOW.js网站动画使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！