wow动画插件使用@TOC

wow.js调用

1.在页面头部调用animate.css或animate.min.css
<link rel="stylesheet" href="./css/animated.css">

2.在页面底部引用wow.js，并进行初始化
简单版

<script src='./js/wow.min.js'></script>
<script>
  vnew WOW().init();
</script>

自定义版

<script src='./js/wow.min.js'></script>
<script>
   var wow = new WOW({
   boxClass: 'wow',
   animateClass: 'animated',
  offset: 0,
  mobile: true,
  live: true
});
wow.init();
</script>

<!-- 
boxClass       默认值：wow         需要执行动画元素的class
animateClass   默认值：animated    animated.css动画的class
offset         默认值：0           距离可视区域多少开始执行动画
mobile         默认值：true        是否在移动设备上执行动画
live           默认值：true        异步加载的内容是否有效 
-->

3.在想要使用动画的位置引用就可以了

<li class="wow fadeInLeft animated" data-wow-duration="1s" data-wow-delay="0.2s" >
                    <img src="./img/pag.jpg">
                    <h3>文章内容</h3>
                    <p>人生若只如初见</p>
</li>

<!--
data-wow-duration          动画持续时间  
data-wow-delay              动画延迟时间
data-wow-offset=”0”       距离可视区多远开始执行动画。 
data-wow-iteration=”1”  重复次数。

animate.css包括
fadeIn、fadeInDown、fadeInRight、fadeInDownBig、fadeInRightBig
fadeOut、fadeOutDown、fadeOutRight、fadeOutDownBig、fadeOutRightBig
slideInDown、slideInRight、slideOutUp、slideOutRight
bounceIn、bounceInUp、bounceInRight、bounceOutDown、bounceOutRight
等动画

案例展示：http://share.mongochao.cn/wow/

最后

以上就是过时钻石为你收集整理的wow.js调用教程wow.js调用的全部内容，希望文章能够帮你解决wow.js调用教程wow.js调用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。