【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン

JavaScript

2013.07.25

はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。
まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。

本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。
記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。

jquery.inview

気になったので使い方を調べてみました。

簡単な使い方

　1. jQueryとjquery.inview.jsを読み込みます

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
  <script src="jquery.inview.js" type="text/javascript"></script>

　2. イベントを設定したい要素を書いて…

  <div id="inviewTest">Hello World!</div>

　3. その要素に対し、.on() で'inview'イベントを設定してあげます

    $('#inviewTest').on('inview', function() {
           //ブラウザの表示域に表示されたときに実行する処理
           $(this).animate({
                  fontSize: "5em"
           },1500);
    });

これで、ブラウザで要素が見えたときにアニメーションを実行するという動作を実現できます。

ちなみに設定したイベントは.off()で外すことができます。

    $('#inviewTest').off('inview');

サンプル

もう少し詳しい使い方

イベントを設定する際、コールバック関数の引数としてisInView, visiblePartX, visiblePartYの３つを受け取ることができます。

isInView

isInViewには

要素が表示域に入ったとき	true
要素が表示域から外れたとき	false

がそれぞれ渡されます。

なので、例えば「要素が見えたとき」「要素が見えなくなったとき」の両方にイベントを設定したい場合は以下のようになります。

     $('#inviewTest').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
              //要素が見えたときに実行する処理

            } else {
              //要素が見えなくなったときに実行する処理

            }
    });

サンプル

visiblePartX, visiblePartY

visiblePartXには

要素の左側だけが表示域に入ってるとき	'left'
要素の右側だけが表示域に入ってるとき	'right'
要素の左右両方が表示域に入ってるとき	'both'

が渡されます。

同様に、visiblePartYには

要素の上側だけが表示域に入ってるとき	'top'
要素の下側だけが表示域に入ってるとき	'bottom'
要素の上下両方が表示域に入ってるとき	'both'

が渡されます。

例えば要素の一部分だけではなく、要素の全体が見えるようになったタイミングでイベントを発生させたい場合、以下のようになります。

    $('#inviewTest').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
        if (isInView) {
            if (visiblePartX == 'both' && visiblePartY == 'both'){
                  //要素の全体が見えるようになったときに実行する処理

            }
        }
    });