wow.js调用教程

最新推荐文章于 2025-03-15 13:04:21 发布

mongoChao

最新推荐文章于 2025-03-15 13:04:21 发布

阅读量494

点赞数

分类专栏：经验分享文章标签：经验分享程序人生面试

本文链接：https://blog.youkuaiyun.com/MangoChao/article/details/106403679

版权

经验分享专栏收录该内容

9 篇文章

订阅专栏

本文是关于wow.js动画插件的调用教程，涵盖了如何在页面中引入animate.css样式文件和wow.js脚本，以及如何进行初始化设置。文章列举了animate.css包含的各种动画效果，如fadeIn、fadeOut、slide和bounce系列，并提供了案例链接供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/