スクロールして出現したタイミングで発火させるjQueryプラグイン「inview」

スクロールでエリアに表示された時の処理を指定できるjQueryプラグインを紹介します。

他のプラグインとの組み合わせのもできるので、使い勝手がとてもいいですよ。

はにわまん

スクロールに応じて発火できる優れもの！

ダウンロード

※ ver.1.1.2時点の内容です。

ソースコードはgithub上で管理されています。
→ protonet/jquery.inview

右上の「Download zip」からダウンロードしてください。

使い方

ライブラリを読み込む

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.inview.min.js"></script>

表示させるアイテム

JavaScript側で要素を選ぶので、なんでもOKです。

例）

<div class="get-inview">JavaScript発火用のクラス</div>

inviewの設定

スクロールで登場した時の処理を記載します。

jQuery( function($) {
	$('.get-inview').on( 'inview', function( event, isInView ) {
		if (isInView) {
			$(this).css('color','red');
		} else {
			$(this).css('color','inherit');
		}
	});
});

上記は、「表示している間は文字を赤にする」という単純な処理をしています。

おわり

スクロールして出現したタイミングで発火させるjQueryプラグイン「inview」を紹介しました。

on( 'inview' )の関数で条件分岐することで指定できるので、汎用性もあって使いやすいライブラリです。