सामग्री को स्क्रॉल करते समय CSS3 कीफ्रेम एनीमेशन सक्रिय करें

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि एनीमेशन कैसे दिखता है जब इसे देखने में स्क्रॉल किया जाता है लेकिन बिना किसी किस्मत के। मुझे एक JQuery प्लगइन "Waypoints" मिला लेकिन मुझे इसका उपयोग करने के लिए कौशल की कमी है। मैं CSS3 कीफ्रेम का उपयोग करने की कोशिश कर रहा हूं जो दृश्य में स्क्रॉल किए जाने पर एनिमेट करें। मैंने एक सफलता हासिल की और जो मैं पूरा करना चाहता हूं उसके करीब हूं लेकिन यह काफी नहीं है जहां मैं इसे चाहता हूं। मेरे पास "बाउंसिनराइट" नामक एक वर्ग है जो आइटम को स्क्रीन के दाईं ओर उछालती है। यहाँ उस के लिए सीएसएस है:

@-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; 
} 

और उसके बाद मैं एक छोटे से JQuery टुकड़ा है कि वर्ग के साथ एनीमेशन ट्रिगर किया जाएगा है "शुरू" जब यह करने के लिए स्क्रॉल किया गया है।

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

मेरी समस्या यह है कि जब "bounceinright" के साथ एक आइटम तक स्क्रॉल किया जाता है, यह एक ही कक्षा के साथ आइटम की सभी ट्रिगर है। मैं सोच रहा था कि क्या उन्हें व्यक्तिगत रूप से ट्रिगर करने का एक तरीका था लेकिन एक ही कक्षा के साथ। किसी भी सहायता की सराहना की जाएगी।

धन्यवाद!

Answer 1

अपने 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'); 
     } 
    }); 
}