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();

posted @ 2022-02-06 14:35  学无边涯  阅读(133)  评论(0编辑  收藏  举报