页面滚动动画库wow.js、aos.js、scrollReveal.js区别对比详解

发布时间:2024-04-27 00:33:51

wow.js

官网:https://wowjs.uk/

github:https://github.com/graingert/wow

特点:

wow.js是一个轻量级的动画库,不依赖第三方js。

兼容pc端和移动端

主要通过添加CSS类来触发动画效果,一般结合animate.css动画库使用。

支持自定义动画效果和事件回调函数。

缺点:

页面向下滚动只执行一次动画,向上滚动不执行动画。


aos.js(推荐)

官网:http://michalsnik.github.io/aos/

github:https://github.com/michalsnik/aos

特点:

aos.js是一个功能强大的动画库,可以实现各种复杂的动画效果,不依赖第三方js。

主要通过添加CSS类来触发动画效果,默认自带aos.css动画库,aos3也可以结合animate.css等第三方动画库使用。

支持自定义动画效果和事件回调函数。

页面向下滚动每次都执行动画,向上滚动默认不执行,可设置{mirror:true}向上滚动也执行。


scrollReveal.js

官网:https://scrollrevealjs.org/

github:https://github.com/jlmakes/scrollreveal

特点:

scrollReveal.js是一个功能强大的动画库,可以实现各种复杂的动画效果,不依赖第三方js。

不依赖css动画库,通过配置js方法参数来实现动画。

支持自定义动画效果和事件回调函数。

默认页面向下滚动只执行一次动画,向上滚动默认不执行,可设置参数{reset:true}向上向下每次滚动都执行动画。

缺点:

没有另外两个库调用简单