Attivare l'animazione di fotogrammi chiave CSS3 quando il contenuto scorre in vista

Question

Ho cercato di capire come si verificano le animazioni quando si scorre in visualizzazione ma con poca o nessuna fortuna. Ho trovato un plugin JQuery "Waypoint" ma non ho le competenze per utilizzarlo. Sto cercando di utilizzare i fotogrammi chiave CSS3 che si animano quando vengono visualizzati nella vista. Ho fatto un passo avanti e sono vicino a quello che voglio realizzare ma non è esattamente dove lo voglio. Ho una classe chiamata "bounceinright" che fa rimbalzare la voce alla destra dello schermo. Ecco il CSS per questo:

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

e poi ho un piccolo frammento JQuery che attiverà l'animazione con la classe "start" quando viene fatto scorrere a.

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

il mio problema è però che quando un elemento con "bounceinright" scorre a, si innesca tutti gli elementi con la stessa classe. Mi stavo chiedendo se ci fosse un modo per farli innescare individualmente ma con la stessa classe. Qualsiasi aiuto sarebbe apprezzato.

Grazie!

Answer 1

Cambia la tua checkAnimation() a

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