本文主要是介绍实现页面动画效果（wow.js），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
序：当滚动条滑到某个位置时，该位置的有些元素显示动画效果。
wow.js 依赖 animate.css，它支持多种动画效果，可以满足你的多种需求。
html页面头部引入animate.css
<link rel="stylesheet" type="text/css" href="css/animate.min.css">html页面底部引入wow.js或wow.min.js和默认配置
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">new WOW().init();
</script>亦可自定义配置
<script>let wow = new WOW({boxClass: 'wow',animateClass: 'animated',offset: 0,mobile: true,live: true});wow.init();
</script>
html页面实现（标签为块状或者行内块状），并使用class类名。
<div class='wow fadeInUp'>动画效果</div>增加效果
| data-wow-duration | 动画持续时间 |
| data-wow-delay | 动画延迟时间 |
| data-wow-offset | 元素的偏移量（距离底部多少像素执行） |
| data-wow-iteration | 动画执行次数（可选可不选） |
<div class="wow fadeInUp" data-wow-duration="3s" data-wow-delay="2s" data-wow-offset="10" data-wow-iteration="10">动画效果</div>效果文档（进入站点后点击右侧菜单列表即可浏览效果）
Animate.css | A cross-browser library of CSS animations.
animate.min.css 文件下载（需要删除 ‘animate__’ 前缀，亦可自行测试使用）
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
wow.js和animate.css文件下载：GitHub - matthieua/WOW at 20848c410fe32d161c2330e1d261b59512094f81
这篇关于实现页面动画效果（wow.js）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
