Question

我正在使用animate.css并尝试将动画类应用于页面中的不同部分。动画正在运行，但当我滚动到该特定部分时却没有。所以现在如果我想看一个特定的部分动画，那么我将不得不刷新。所以我想知道如何在滚动上实现动画。

请在此处查看完整代码http://codepen.io/anon/pen/rxoaWP

以下是用于实现它的Javascript。不知道我哪里错了。提前谢谢。

$(document).ready(function(){
    $(window).scroll(function(event)) {
        var y = $.(this).scrollTop();
        if (y >= 300) {
            $('#about').addClass('animated shake');
        }
    });
});

$(document).ready(function(){
    $(window).scroll(function(event)) {
        var y = $.(this).scrollTop();
        if (y >= 600) {
            $('#about').addClass('animated shake');
        }
    });
});

Answer 1

根据建议你可以使用wow.js，这将使它更容易。检查一下：

.quot{
	text-align:center;
	outline: 3px solid #BFBFBF;

}

#vision{
	font-size: 22px;
	font-weight: bold;
}

<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="row" >
  <div class="">
    <div id="about" class="section wow bounceInUp scrollspy">
      <div class="container">
        <h2 class="wow bounceInDown" style="text-decoration:underline;text-align:center;font-weight:bold;font-family:Comic Sans MS">About Us</h2><br><br>
          <div class="wow bounceInUp">
            <h5 style="color:#446CB3;padding-top:30px;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Vision</h5>
            <p id="vision" class="wow bounceInUp">"Lorem ipsem Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem</p>
            <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Mission</h5>
            <p id="vision">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p>
            <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Objectives</h5>
            <p id="vision">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p><br><br><br>
          </div>
      </div>
  </div>
</div><br><br>
  
  <div class="row" >
  <div class="">
    <div id="aboutyou" class="wow bounceInUp section scrollspy">
      <div class="container">
        <h2 class="wow bounceInUp" style="text-decoration:underline;text-align:center;font-weight:bold;font-family:Comic Sans MS;color:red">About you</h2><br><br>
          <div class="wow bounceInUp">
            <h5 style="color:#446CB3;padding-top:30px;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Vision 1</h5>
            <p id="vision" class="wow bounceInUp">"Lorem ipsem Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem</p>
            <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Mission 1</h5>
            <p id="vision" class="wow bounceInUp">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p>
            <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Objectives 1</h5>
            <p id="vision" class="wow bounceInLeft">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p><br><br><br>
          </div>
      </div>
  </div>
</div><br><br>

向下滚动时动画无法正常工作

1 个答案: