WOW.js – 让页面滚动更有趣
【摘要】
关注“青年码农”，回复“特效“
获取各种资料粒子特效、可视化等源码
如果给向下滚动的页面增加一些细微的动画，这往往能给浏览者带来更好的体验，WOW.js就是这么一个能让用户眼前一亮的JavaScript库。
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需...
关注“青年码农”，回复“特效“
获取各种资料粒子特效、可视化等源码
如果给向下滚动的页面增加一些细微的动画，这往往能给浏览者带来更好的体验，WOW.js就是这么一个能让用户眼前一亮的JavaScript库。
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。由于使用了CSS3动画，所以一些老旧的浏览器是不支持的。为了兼容，可以增加浏览器判断。
使用方法
1. 引入文件-animate和WOW
<link rel="stylesheet" href="css/animate.min.css"><script src="js/wow.min.js"> </script>
如果是npm包，直接可以用npm或者yarn安装依赖
# yarn
2. 初始化
new如果你想在初始化之前在修改一些配置，WOW也是支持的
var newboxClass 'wow' // 需要执行动画的元素的 class(默认是wow)
'animated' // animation.css 动画的 class(默认是animated)
0 // 距离可视区域多少开始执行动画(默认为0)
true // 是否在移动设备上执行动画(默认为true)
true // 异步加载的内容是否有效(默认为true)
function (box)
// 每次动画启动时都会触发这个回调函数
//传入的参数是动画DOM节点
scrollContainer null // 可选滚动容器选择器，否则使用窗口
3. 给元素添加动画
class "wow slideInRight" </div>
注意：这里面的class名是 animate 3x版本及以下，如果你引用的是4x版本，4x版本默认class名需要带前缀（默认为animate__）
class "wow animate__slideInLeft" </div>class "wow animate__slideInRight" </div>
animate 也提供完全不带前缀的文件-animate.compat.css，和3x版本使用一样。
支持 animate.css 多达 60 多种的动画效果，同时还可以使用一些高级用法，如：
data-wow-duration（动画持续时间）
class "wow slideInLeft" "2s" </div>data-wow-delay（动画延迟时间）
class "wow slideInLeft" "5s" </div>data-wow-offset:距离开始动画(浏览器底部)
class "wow slideInRight" "10" </div>data-wow-iteration:动画重复的次数
class "wow slideInRight" "10" </div>最后一个简单的demo送上
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<style>
.row {
text-align: center;
}
.row div {
padding: 20px;
}
</style>
</head>
<body>
<div class="dowebok">
<div style="height:100vh;"> </div>
<div class="row">
<div class="wow rollIn"> </div>
<div data-wow-offset="10" data-wow-iteration="10" class="wow bounceInDown"> </div>
<div data-wow-duration="2s" data-wow-delay="5s" class="wow lightSpeedIn"> </div>
</div>
<div style="height:100vh;"> </div>
</div>
<script src="http://cdn.dowebok.com/131/js/wow.min.js"> </script>
<script>
new WOW().init();
</script>
</body>
</html>
来都来了，点个在看再走吧~~~
文章来源: blog.csdn.net，作者：NMGWAP，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/NMGWAP/article/details/124998714
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）