首页 > 有点儿皮的页面滚动效果库
头像
程序员鱼皮
发布于 2021-04-23 23:31
+ 关注

有点儿皮的页面滚动效果库

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

前段时间刚给大家推荐了一个强大易用的跨平台 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

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

全部评论

(1) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

近期精华帖

热门推荐