İçerik görüntülendiğinde CSS3 animasyon karesi animasyonunu etkinleştirin

Question

Görüntülendiğinde ancak çok az şanssızlık ile animasyonların nasıl görüneceğini anlamaya çalışıyorum. Bir JQuery eklentisi "Waypoints" buldum ama bunu kullanmak için becerilerim yok. Görünümüne kaydırıldığında canlandıran CSS3 anahtar karelerini kullanmaya çalışıyorum. Bir atılım yaptım ve başarmak istediğim şeye yakınım ama tam istediğim yer değil. Öğenin ekranın sağında sekmesini sağlayan "bounceinright" adında bir sınıf var. İşte bunun için CSS:

@-webkit-keyframes bounceinright { 
0% { 
    opacity: 0; 
    -webkit-transform: translateX(2000px); 
} 

60% { 
    opacity: 1; 
    -webkit-transform: translateX(-30px); 
} 

80% { 
    -webkit-transform: translateX(10px); 
} 

100% { 
    -webkit-transform: translateX(0); 
} 
} 

@-moz-keyframes bounceinright { 
0% { 
    opacity: 0; 
    -moz-transform: translateX(2000px); 
} 

60% { 
    opacity: 1; 
    -moz-transform: translateX(-30px); 
} 

80% { 
    -moz-transform: translateX(10px); 
} 

100% { 
    -moz-transform: translateX(0); 
} 
} 

@-o-keyframes bounceinright { 
-o-transform: translateX(2000px); 
} 

60% { 
opacity: 1; 
-o-transform: translateX(-30px); 
} 

80% { 
-o-transform: translateX(10px); 
} 

100% { 
-o-transform: translateX(0); 
} 
} 

@keyframes bounceinright { 
0% { 
    opacity: 0; 
    transform: translateX(2000px); 
} 

60% { 
    opacity: 1; 
    transform: translateX(-30px); 
} 

80% { 
    transform: translateX(10px); 
} 

100% { 
    transform: translateX(0); 
} 
} 

.bounceinright { 
display: none; 
} 

.bounceinright.start { 
-webkit-animation: bounceinright 1s ease-out forwards; 
-moz-animation: bounceinright 1s ease-out forwards; 
-ms-animation: bounceinright 1s ease-out forwards; 
-o-animation: bounceinright 1s ease-out forwards; 
animation: eigbounceinrighthty 1s ease-out forwards; 
display: block; 
} 

ve sonra sınıf ile animasyon tetikleyecek biraz JQuery pasajı var o kadar kaydırıldığında "start".

//////////////////////////////// 
//scroll events 
////////////////////////////////  
function isElementInViewport(elem) { 
var $elem = $(elem); 

// Get the scroll position of the page. 
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
var viewportTop = $(scrollElem).scrollTop(); 
var viewportBottom = viewportTop + $(window).height(); 

// Get the position of the element on the page. 
var elemTop = Math.round($elem.offset().top); 
var elemBottom = elemTop + $elem.height(); 

return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
} 

// Check if it's time to start the animation. 
function checkAnimation() { 
    var $elem = $('.row .wpb_content_element'); 

    // If the animation has already been started 
    if ($elem.hasClass('start')) return; 

    if (isElementInViewport($elem)) { 
     // Start the animation 
     $elem.addClass('start'); 
    } 
} 

// Capture scroll events 
$(window).scroll(function(){ 
    checkAnimation(); 
}); 

benim sorunum olsa "bounceinright" ile bir öğe için kaydırıldığında, aynı sınıfla öğelerin TÜM tetikler olmasıdır. Tek tek ama aynı sınıfla onları tetiklemenin bir yolu olup olmadığını merak ediyordum. Herhangi bir yardım takdir edilecektir.

Teşekkür ederiz!

Answer 1

orada checkAnimation()

// Check if it's time to start the animation. 
function checkAnimation() { 
    var $elem = $('.row .wpb_content_element'); 

    $elem.each(function(){ 
     var $singleElement = $(this); 
     // If the animation has already been started 
     if ($singleElement.hasClass('start')) return; 

     if (isElementInViewport($singleElement)) { 
      // Start the animation 
      $singleElement.addClass('start'); 
     } 
    }); 
}