ブートストラップ内でスクロールを検出するスクロールの各要素をモーダルにしてアニメ化する

Question

ブートストラップモーダルを開くと、各要素のスクロール時にズームインアニメーションが発生するコードを記述しようとしていました。

jsFiddleリンク - ここhttps://jsfiddle.net/nwxLq2zg/1/

は、サンプルコードです -

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 

     <p>...</p> 
     <p>...</p> 
     <p>...</p> 
     <p>...</p> 
     ... 

     </div> 
    </div> 
    </div> 
</div> 

jQueryの

$('#myModal').on('show.bs.modal', function() { 

    $(".modal-body").unbind("scroll"); 

    $(".modal-body").scroll(function(){ 

     var mScroll = $(this).scrollTop(); 

     $('.modal-body p').each(function(){ 

      var eTop = $(this).offset().top; 
      console.log('Modal:'+mScroll+'| Element:'+eTop); 

      if(eTop > mScroll) { 
      $(this).addClass('animated zoomIn'); 
      } 

     }); 
    }); 
}); 

問題addClassはスクロールvalue.Iの疑問に関係なく、すべての要素にこれを解雇されました私のコードが個々の "< p>"タグを識別できなかったからです。もし誰かが答えを見つけることができれば、本当に役に立ちます。

実際のコードは、このjsFiddleで見つけることができます - https://jsfiddle.net/nwxLq2zg/1/

Answer 1

私はこのバイオリンを<= mScrollを使用して-50 on top offset チェックを追加してみてください。

https://jsfiddle.net/nwxLq2zg/5/

$('#myModal').on('show.bs.modal', function() { 

    $(".modal-body").unbind("scroll"); 

    $(".modal-body").scroll(function(){ 
     var mScroll = $(this).scrollTop(); 

     $('.modal-body p').each(function(){ 
     var eTop = $(this).offset().top - 50; 

      if(eTop <= mScroll) { 
      $(this).addClass('animated zoomIn'); 
      } 

     }); 
    }); 
}); 

Answer 2

あなたはWow.jsを使用することができ、それはスクロールの暴露の情報が役立ちます。あなたはこのプラグインをダウンロードするだけで、あなたのページにjsファイルを追加し、ページの読み込みにうわさを初期化する必要があります。

あなたのhtmlでは、実行時にクラスを追加する必要はありません。

お楽しみください:)