特定の要素がブラウザの表示領域に現れたときに処理を実行するjQueryプラグイン。それが［jquery.inview］です。

このプラグインを利用すると、ウィンドウに指定した要素が現れたタイミングで様々なイベントを施すことができます。

今回、以下のリンク先にて用意したサンプルでは、要素が画面内に現れるタイミングでフェードインしながら表示させ、逆に画面から外れるとスタイルシートでopacity:0;を効かせて透明化する、という処理を行っています。

［jquery.inview］：実装サンプル

使い方、実装方法は以下のとおり。

［jquery.inview］の実装方法

まずはGithubに用意されている公式の配布サイトからプラグインのファイルをダウンロードしてきましょう。

Github : https://github.com/protonet/jquery.inview

ダウンロードしてきた［jquery.inview.min.js］をHTMLの適当な箇所で読み込みます。またこのとき、別途ダウンロードしてきたjQueryの本体ファイルも先に読み込んでおくようにします。
より簡素にしたいならCDNにホストされているjQueryファイルを利用しましょう。

以下はGoogleのCDNにホストされているjQueryの本体ファイルを利用する際のサンプルのコードになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.inview.min.js"></script>

続いて［jquery.inview］を効かせたい要素を設置します。
ここでは仮に「class="box"」と名付けたブロック要素を作ります。

<body>
〜
<div class="box">サンプル</div>
〜
</body>

そして最後に［jquery.inview］を動かすプログラムを記述します。
基本的には下記の記述でイベントを発生させることができます。

$('.box').on('inview', function() {
	// 要素がウィンドウの表示領域に現れたときに実行する処理
});

ここでは、あらかじめ要素をCSSでopacity:0;として非表示にしておき、ウィンドウに現れたタイミングでフェードインの処理を施します。
具体的なコードは以下のようになりますね。

<script>
$(function() {
$('.box').css('opacity', 0);
$('.box').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
	if (isInView) {
		if (visiblePartY == 'both') {
			$(this).stop().animate({opacity:1}, 300);
		}
	}
	else {
		$(this).stop().animate({opacity: 0}, 300);
	}
});
});
</script>

イベントを設定する際、上記のようにコールバック関数の引数で「isInView」「visiblePartX」「visiblePartY」の３つを指定できます。

isInView
要素が表示領域に入ったときに「true」を、表示領域から外れたときに「false」を返します。
visiblePartX
要素の左側だけが表示域に入ってるときに「left」を、要素の右側だけが表示域に入ってるときに「right」を、要素の左右両方が表示域に入ってるとき 「both」を返します。
visiblePartY
要素の上側だけが表示域に入ってるときに「top」を、要素の下側だけが表示域に入ってるときに「bottom」を、要素の上下両方が表示域に入ってるときに「both」を返します。

スクロールに合わせて要素を動かすことができるので、パララックス・デザインとの相性が良いですね。
実装も簡単なので是非お試しください。

［jquery.inview］：実装サンプル