实现页面动画效果（wow.js）

本文主要是介绍实现页面动画效果（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）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---