jQuery.inview.jsで画面に表示された要素に対して処理を行う

ウインドウに要素が表示されたタイミングでイベントを発生させたい場合jquery.inview.jsを使うことで実現できます。
https://github.com/protonet/jquery.inview

使い方

jqueryを読む

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jquery.inview.jsを読む

<script src="jquery.inview.js"></script>

inviewというクラス名が付いている要素が表示領域に入った場合true

<script>
$(function() {
  $( '.inview' ).on( 'inview', function( event, isInView ) {
    if( isInView ) {
      //ウィンドウに表示された場合の処理
    }
    else {
      //ウインドウの外の場合の処理
    }
  });
});
</script>

例

まずは対象要素をopacity:0で非表示にしておき、ウインドウの外の要素はrelative,bottom:2emで2em持ち上げておきます。
ウインドウに入ったらtransition有効でbottom:0,opacity:1としてふわっと表示されるというエフェクトを実現しました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.inview.js"></script>
<script>
$(function() {
  $( '.inview' ).css({ 'position':'relative', 'opacity':0, 'bottom': '2em' });
  $( '.inview' ).on( 'inview', function( event, isInView ) {
    if( isInView ) {
      $( this ).addClass( 'inview-active' );
      $( this ).css({
        'opacity': 1,
        'bottom': 0,
        'transition': '.4s opacity, .4s bottom'
      });
    }
    else {
      $( this ).removeClass( 'inview-active' );
      $( this ).css({
        'opacity': 0,
        'bottom': '2em',
      });
    }
  });
})
;</script>