向下滚动时动画不工作

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>

向下滚动时动画不工作

Animation not working when I scroll down

javascript

jquery

css

animate.css