トリガCSSアニメーション時にビューポートの要素

Question

あなたの目に感謝します。

Javascriptは、ユーザがビューポート内に要素を持つまでCSSアニメーションを遅らせることを目的としています。あなたがそれを実行するとき、この要素を見るために下にスクロールします。あなたが十分に速く動くならば、それはスクロールするのを見るでしょうが、それは待っていません。 、

http://www.justinaguilar.com/animations/index.html#how

昨日：私はこのサイトからコードを得た

https://jsfiddle.net/3jvvvf4s/

：

は、私はそれが動作するはずと信じていた状態で、私のコードでバイオリンを作りました私はそれを働かせましたが、TWOクラスタグを与えたときだけでした。だから、それは何かのように見えた

クラスを組み合わせるか、「怠け者」情報を回すとIDがうまくいかなかった。

私もこのコードを試してみました、私はかなり同じ結果で、どこか他の場所から得た：

$(window).scroll(function() { 
$('.lazy').each(function() { 
    var imagePos = $(this).offset().top; 
    var imageHeight = $(this).height(); 
    var topOfWindow = $(window).scrollTop(); 

    if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) { 
     $(this).addClass("scroll_long"); 
    } else { 
     $(this).removeClass("scroll_long"); 
    } 
}); 

}）;

私の考えはすごく分かりますが、私は正式に困惑しています！

Answer 1

.FOR-anim.playit.scroll_long ：私はアニメーションをトリガするために化合物のクラスを追加した後

アニメーション：立方ベジェ5600ms（0.694、0、0.335、1）1000msのscrollScreenを実行して、正常な転送1;}

他のスタイルの.scroll_longを削除することを忘れてしまいました。

もう一度おねがいします！