CODEWITHSUNDEEP
javascriptjquerycssanimate.css
jackD
jackD

Reputation: 801

Animation not working when I scroll down

I am using animate.css and trying to apply animation classes to different sections in a page. The animations are working but not when I scroll to that particular section. So now if I want to see a particular section animation then I will have to refresh. So I want to know how can I achieve the animation on the scroll.

See full code here http://codepen.io/anon/pen/rxoaWP

Below is the Javascript am using to achieve it. Not sure where am I going wrong. Thanks in advance.

$(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');
        }
    });
});

Upvotes: 1

Views: 3435

Answers (1)

Arun Sharma
Arun Sharma

Reputation: 1331

As suggested you can use wow.js which will make it easier. Check this:

.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>

Upvotes: 1

Related Questions