スクロールのJquery CSSアニメーションが期待通りに機能しない

Question

このチュートリアルを使用してスクロールでCSSアニメーションをアクティブ化しようとしましたhttp://codepen.io/benske/full/yJoqz。

私が改正されている唯一のものは、無競合モードで動作するようにjqueryのある、

私のバージョン：

<script> 
jQuery(function() { 
var $window   = $(window), 
     win_height_padded = $window.height() * 1.1, 
     isTouch   = Modernizr.touch; 

    if (isTouch) { $('.revealOnScroll').addClass('animated'); } 

    $window.on('scroll', revealOnScroll); 

    function revealOnScroll() { 
    var scrolled = $window.scrollTop(), 
     win_height_padded = $window.height() * 1.1; 

    // Showed... 
    jQuery(".revealOnScroll:not(.animated)").each(function() { 
     var $this  = $(this), 
      offsetTop = $this.offset().top; 

     if (scrolled + win_height_padded > offsetTop) { 
     if ($this.data('timeout')) { 
      window.setTimeout(function(){ 
      $this.addClass('animated ' + $this.data('animation')); 
      }, parseInt($this.data('timeout'),10)); 
     } else { 
      $this.addClass('animated ' + $this.data('animation')); 
     } 
     } 
    }); 
    // Hidden... 
    jQuery(".revealOnScroll.animated").each(function (index) { 
     var $this  = $(this), 
      offsetTop = $this.offset().top; 
     if (scrolled + win_height_padded < offsetTop) { 
     $(this).removeClass('animated fadeInUp flipInX lightSpeedIn') 
     } 
    }); 
    } 

    revealOnScroll(); 
    }); 
</script> 

アイブ氏はアニメーションしかし、スクロールにあなたがスクロールアップするたびに活性化し得ることができましたアニメーションを削除します。スクロールバックすると、アニメーションが最後の数ミリ秒にスキップされることも、まったく再生されないこともあります。

私の試みはdev.silverfx.co.ukですが、上下にスクロールして見ることができますが、滑らかさをチュートリアルと比較するとすぐにわかります。

Answer 1

スクロールでアニメーションを作成する場合は、scrollmagicを使用することを強くお勧めします。それは非常に使いやすく、特にこの目的のために設計されていて、はるかに効率的です。

GSAP（アニメーションエンジン、jqueryよりもはるかに高速）を使用したScrollMagicを使用すると、少し複雑なアニメーションを作成することができます。

あなたが提供したリンクの例であなたのソリューションを試しましたが、スクロールが非常に速い場合にのみ問題を再現できました。アニメーションビューポートに再び当たったときにアニメーションが再生されていたことが原因でした。

うまくいきました。

はここスクロール魔法例ですが、私はあなたがそれを撮影を与えるべきだと思う：

http://janpaepke.github.io/ScrollMagic/examples/advanced/advanced_tweening.html