让网站动起来的js库，真漂亮，再也不用写复杂的动画了~wow.js

yund56 2025-07-20 07:14 3 浏览

前言

越来越多的网站特效很漂亮，其中就有一种我很喜欢的动画，就是当滑动到某个元素的时候，元素就是出现动画效果，如：缩放、旋转、滑动等。感觉很漂亮，之前在做企业站的时候，基本上都是自己手写的，有点麻烦而且效果也不是很好，最近发现了一款比较好用的动画库~~~~wow.js，可以轻松的网站具有这种特效。感受一下吧

安装使用

Wow.js 的动画效果依赖于第三方库，官方推荐的是： Animate.css

当然也可以使用其它的动画库，需要配置一下 wowo.js。这里就以 Animate.css 为例展开介绍了。有兴趣的同学可以尝试使用一下其它的动画库。

引入动画库

<link rel="stylesheet" href="css/animate.css">

引入并且使用 wow.js

<script src="js/wow.min.js"></script>
<script> new WOW().init(); </script>

配置一下需要使用动画的元素，为元素的class属性添加一个名为 .wow 的class样式

<div class="wow"> Content to Reveal Here</div>

从 Animate.css 选择要使用的动画效果

<div class="wow bounceInUp"> Content to Reveal Here</div>

至此，就已经添加好了一个效果了

高级配置

可以针对时间、延时等一些配置做具体的修改

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
</section>

还可以通过js一些属性

boxClass: 给需要动画效果的元素设置的class名称，默认是"wow"

animateClass: 需要提供动画的库，默认是由 animate.css 提供

offset: 定义距底部还有多少距离时触发动画效果

mobile: 开启是否在手机上使用动画效果

 wow = new WOW({
     boxClass:     'wow',      // default
     animateClass: 'animated', // default
     offset:       0,          // default
     mobile:       true,       // default
     live:         true        // default
   }
 )
wow.init();

开源协议

wow.js 使用的 MIT 开源协议，可以免费的使用，不过你的软件如果是有专利或者需要付费的，请记住在您的产品中包含MIT许可证的全部内容。

总结

wow.js 是一款不错的js特效库，可以方便地给元素添加上滑动出现的效果。大大提高了网站的美观和交互性，并且降低了开发时间和成本。

关注我，分享给您实用的前端知识和优秀的组件库~~

js特效模块特效

上一篇：什么是JavaScript，它能做什么（javascript干啥的）
下一篇：ThingJS粒子特效一键实现雨雪效果

让网站动起来的js库，真漂亮，再也不用写复杂的动画了~wow.js

前言

安装使用

高级配置

开源协议

总结

相关推荐

django留言板_留言板html好看的模板

一次分享给你29个PHP基础常用类助力你快速提升

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一篇文章轻松掌握VLookup、XLookup与Filter函数

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

Excel筛选也智能?一个FILTER函数就搞定!

营商在上海_营商上海数字科技有限公司