编程语言
首页 > 编程语言> > 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();

标签:动画,data,WOW,javascript,js,true,wow
来源: https://www.cnblogs.com/96net/p/15865646.html