コンテンツがビューにスクロールしたときにCSS3キーフレームアニメーションを有効にする

Question

アニメーションをスクロールして表示する方法を理解しようとしていますが、私はJQueryプラグイン "Waypoints"を見つけましたが、私はそれを利用するスキルがありません。私はCSS3のキーフレームを使用して、ビューにスクロールされたときにアニメーション化しようとしています。私は画期的なものを作り、私が達成したいものに近いですが、それが私が望むところではありません。私は "bounceinright"という名前のクラスを持っています。これは、アイテムを画面の右側にバウンスさせます。

@-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のスニペットを持っている：ここではそのためのCSSです。

//////////////////////////////// 
//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」との項目が1つにスクロールされたとき、それは同じクラスを持つすべてのアイテムをトリガーするということです。私は、同じクラスで個別にトリガーする方法があるのだろうかと思っていました。どんな助けもありがとう。

ありがとうございました！

Answer 1

はあなた checkAnimation()ありません運