页面滚动效果库，有点儿皮！

Posted 2022-04-17 程序员鱼皮

一分钟，让页面滚动更有趣

前段时间刚给大家推荐了一个强大易用的跨平台 CSS3 动画库 Animate.css，内置了很多常用的 CSS 动画，可以一行代码让页面动起来。

今天再推荐它的堂弟，WOW.js，一个有点儿皮的页面滚动效果库。

进入它的官网，就知道这个类库非常有趣了，屏幕上长满了各种各样的狗头。

官网即这个库的介绍和演示页面，当你向下滚动页面时，一个个狗头会以各种不同的动画进行展现。在狗头中间，可以看到这个库的优秀特性，比如简单易用、纯 JS 实现、不依赖 jQuery、动画丰富、只有 3 kb 大小、即时展现等。

WOW.js 基于 Animate.css，能够在页面滚动到某一位置时，触发 Animate.css 的内置动画，从而让页面更加生动。

下面演示一下它的用法，一分钟就能学会！

如何使用

滚动效果的应用场景有很多，比如你要给朋友做一个生日祝福网站，可以先打上老长一段话，当朋友看完这段话，滚动页面到底部的时候，弹出一个生日蛋糕 🎂，会增加不少惊喜感。

如果自己来做滚动动画，你要编写 JS 代码来判断页面滚动位置是否达到元素所处位置，再动态添加类名，一个元素也还好说，如果想控制多个，就比较麻烦了。

如果使用 WOW.js，一切就简单了许多。

它的使用方式很简单，先引入它依赖的 Animate.css：

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

再引入 WOW.js 并且初始化一个实例，依然可以使用 CDN：

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

接下来，选择想要在滚动时触发动画效果的元素，给它加上 wow 类名。

<div>
  祝你生日快乐，abaaba！
  此处省略 1000 字
</div>
<!-- 想添加滚动效果的元素 -->
<div class="wow">
  🎂
</div>

最后，从 Animate.css 的动画库中选择一个效果，并且给选中的元素添加对应的类名即可。

比如我选择 “向上弹出” 的动效，对应的类名是 bounceInUp：

<div class="wow bounceInUp">
  🎂
</div>

然后就大功告成啦，生日蛋糕默认会隐藏，直到用户滚动到它才会向上弹出。

此外，还可以通过给元素添加类名来控制动画的持续时长、重复次数、延时、滚动偏移等：

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

也可以在初始化实例时，给所有元素添加全局配置：

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

以上就是 WOW.js 的分享啦，感兴趣的同学可以去试试~

🔍 项目地址：https://www.code-nav.cn/rd/?rid=28ee4e3e6008319f00473b1a245a2c70

在 编程导航 中还能发现更多优质编程学习资源，欢迎分享给有需要的同学吧！