基于jquery滚动的动画

Question

滚动时很难动画。我在互联网上搜索过，但代码很难理解，基于滚动的动画。

Answer 1

您可以使用wow.js来展示基于animate.css的动画。只需添加＆＃34;哇＆＃34;然后将动画名称添加到要动画的div的类中。请遵循以下代码段：

＆＃13;

＆＃13;

p{
  margin:40px auto;
  padding:100px;
  font-size:20px;
  color:#fff;
  }

.col-1{
  background:orange;
}

.col-2{
  background:green;
  }

.col-3{
  background:blue;
  }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>

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

<div class="col-1 wow bounceInUp">  
<p>Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network,created in 2008 by Jeff Atwood and Joel Spolsky.</p>
</div>

<div class="col-2 wow slideInLeft">  
<p>It was created to be a more open alternative to earlier Q&A sites such as Experts-Exchange.</p>
</div>

<div class="col-3 fadeInRight">  
<p>The name for the website was chosen by voting in April 2008 by readers of Coding Horror, Atwood's popular programming blog.</p>
</div>

＆＃13;

＆＃13;

＆＃13;