要素が画面上に表示されたタイミングで処理を行うjQueryプラグイン「jquery.inview」

公開日：2015/01/07

色々なWEBサイトを見ていてページをスクロールしていくと、ブラウザの画面上に表示されたタイミングで画像や要素が出現したりなど、様々なイベントを発生しているサイトを見ることがあります。

今回はある特定の要素が画面に現れたタイミングで処理を行うことができるjQueryのプラグイン「jquery.inview」をご紹介します。「jquery.inview」を使用すると要素が見えたタイミングでイベントを発生することができるので動きのあるページを作成することが可能になります。

ランディングページなどで注目させたい箇所やアピールしたい箇所に動きをつけて、閲覧者に興味を惹かせることができるかもしれませんね。

「jquery.inview」で画面に表示された時に処理を実行

今回は、指定した要素が画面に表示されたタイミングでフェードインして要素を出現させる方法を記述します。

下記のページから「jquery.inview」をダウンロードします。

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

ファイル読込

jQuery、ダウンロードした「jquery.inview」を読み込みます。

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

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

HTML

イベントを発生させたい要素をHTML内に記述します。

<div class="box">出現させる要素</div>

1	<div class="box">出現させる要素</div>

JS

基本的には下記の記述でイベントを発生させることができます。

$('要素').on('inview', function() {
	// 要素が画面に表示された時に実行する処理を記述
});

$('要素').on('inview', function() {

// 要素が画面に表示された時に実行する処理を記述

});

下記は最初に指定した要素を透過させ、要素が表示されたタイミングでアニメーションを行うように指定しています。
また、引数で要素が表示されたかどうかなどの値を取得することができます。

<script>
$(function() {

	$('div.box').css('opacity', 0);

	$('div.box').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if (isInView) {
			if (visiblePartY == 'both') {
				$(this).stop().animate({opacity: 1}, 1000);
			}
		}
	});

});
</script>