wow.js滚动页面实现动画效果_学习

创始人

2024-05-21 01:33:36

wow.js依赖Animate.css一起使用，当页面滚动时渲染动画效果

1、先引入animate.css

如果动画少可以把需要的动画提单独拿出来用，

animate.css具体效果详见：Animate.css | A cross-browser library of CSS animations.

GitHub - animate-css/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

将类wow添加到HTML元素中:它将是不可见的，直到用户滚动显示它

 Content to Reveal Here

选择动画样式
在animation . CSS中选择一个动画样式，然后将CSS类添加到HTML元素中

 Content to Reveal Here

Content to Reveal Here

属性/方法	默认值	说明
boxClass	'wow'	当用户滚动时显示隐藏框的类名
animateClass	'animated'	触发CSS动画的类名(animation . CSS库默认为' animated ')
offset	0	定义浏览器视口底部和隐藏框顶部之间的距离。当用户滚动并达到这个距离时，隐藏框就会显示出来
mobile	true	在移动设备上打开/关闭wow.js
live	true	持续检查页面上是否有新的WOW元素（比如异步加载时是否有需要执行的wow元素）

详见：wow.js — Documentation

注：兼容上，IE6、IE7 等老浏览器不支持 CSS3 动画，所以没有效果；

wow.js使用了querySelectorAll方法，IE 低版本会报错。

wow.js官网：wow.js — Reveal Animations When Scrolling

            GitHub - matthieua/WOW: Reveal CSS animation as you scroll down a page