Tools(2) wow.js动画生成 免监听scroll

1.首先引入 animate.css(引入动画css)

示例:

<p  class="wow bounceInRight" data-wow-duration="0.5"  data-wow-delay="1s" data-wow-iteration=3>测试文字2</p>

2.在body尾巴引入 wow.js(引入js)
   引入之后咱们给他初始化
   <script type="text/javascript">

new WOW().init();
</script>

data-wow-duration:改变动画时间
data-wow-delay:延迟在动画开始之前
data-wow-offset:距离开始动画(浏览器底部)
data-wow-iteration:动画重复的次数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="animate.css" rel="stylesheet" media="all">

	
	<style>
	h1{
		color: #f35626;
		
	}
	p{
		font-size: 30px;
		color: #f35626;
		
	}
	.dd{
		background: red;
     400px;height:880px;border: 11px solid red;
  }
</style>
</head>
<body>
	<div class="dd"></div>
	<div class="wow lightSpeedIn">
		Content to Reveal Here
	</div>
	<div class="wow bounce" >102120120</div>
	<div class="dd"></div>
	<h1>简单测试文字</h1>
	<p  class="wow bounceInRight" data-wow-duration="2s" data-wow-delay="0.1s" >测试文字2</p>
	<script src="wow.min.js"></script>
	<script type="text/javascript">
		new WOW().init();
	</script>
</body>
</html>
<!-- //asdasd 
动画效果 

1.这个依赖aninate.css
2.初始化WOW 记得大写
https://blog.csdn.net/weixin_40292626/article/details/80277182



-->

  



原文地址:https://www.cnblogs.com/nice2018/p/10250795.html