2016-02-10 3 views
1

Я использую 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'); 
     } 
    }); 
}); 
+2

'$ (это)' ????. –

+0

лучше использовать animate.css с помощью wow js plugin – Kumar

+0

Я использовал этот учебник https://www.youtube.com/watch?v=ADmKnE4_DqQ – HebleV

ответ

1

Как вы можете использовать wow.js, это облегчит вам задачу. Проверьте это:

.quot{ 
 
\t text-align:center; 
 
\t outline: 3px solid #BFBFBF; 
 

 
} 
 

 
#vision{ 
 
\t font-size: 22px; 
 
\t 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>

+0

Спасибо за быстрый взлом, и я в состоянии это сделать. Тем не менее, было бы здорово, если бы кто-нибудь мог сообщить мне об ошибке в моем JS-коде, так как вы хотите добиться того же, используя простой javascript или jquery. – HebleV