网页加上动效的作用:
吸引用户注意力,增强用户体验,强调重要信息,提升页面流畅度
有的页面在向下滚动的时候,有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时,才能显示动画。
Wow.js和AOS.js的对比
Wow.js和AOS.js都是常用的网页动画库,用于实现网页滚动时的动画效果。它们都具有一定的优点和特点,可以根据具体需求来评价它们的适用性。
wow.js
优点
Wow.js是一个轻量级的动画库,使用简单方便。它可以通过添加CSS类来触发动画效果,支持多种动画效果,如淡入、滑动、弹跳等。同时,Wow.js还支持自定义动画效果和事件回调函数,可以根据需要进行个性化设置。
缺点
Wow.js的功能相对较为简单,不支持过多的高级动画效果。同时,它依赖于jQuery库,需要引入jQuery才能正常使用。
AOS.js
优点
AOS.js是一个功能强大的动画库,可以实现各种复杂的动画效果。它支持多种动画类型,如淡入、滑动、旋转、缩放等,并且可以通过配置参数进行个性化设置。AOS.js还支持自定义动画效果和事件回调函数,可以满足更多的动画需求。
缺点
AOS.js相对于Wow.js来说,使用稍微复杂一些。它需要通过添加data-aos属性来触发动画效果,并且需要在JavaScript中初始化和配置。同时,AOS.js也依赖于jQuery库。
使用wow.js
- 引入animate.css
- 引入wow.js
- html中添加wow类名
- js中添加<script src="js/wow.min.js"></script><script>new WOW().init();</script>
配置
属性 | 类型 | 默认值 | 说明 |
boxClass | 字符串 | 'wow' | 需要执行动画元素的class |
animateClass | 字符串 | 'animated' | animation.css动画的class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
在css下方js上方写需要动画的元素(必须设置为块状或者行内块状!必须设置为块状或者行内块状!必须设置为块状或者行内块状!),并添加class类名
data-wow-duration 更改动画持续时间
data-wow-delay 动画开始前的延迟
data-wow-offset 开始动画的距离(与浏览器底部相关)
data-wow-iteration 动画的次数重复(无限次:infinite)