画面内に表示されたときに動きをつける「jquery.inview」

スクロールしていくと要素が順番に表示されたり、横からスライド表示されたりするWebサイトが見られるようになってきました。これは、画面内に指定した要素が表示されるタイミングでイベントを実行させるという処理をして表現をしています。今回はそのような、ある特定の要素が画面内（表示領域）に表示されたタイミングでイベント処理を行うことができる、jQueryプラグインの「jquery.inview」をご紹介になります。

ちょっとした動きやアクションをさりげなく表現する程度が丁度良いと思います。あまりなんでもかんでもガチャガチャ動かしてしまうと、視認性もなくなり何がコンセプトなのか不明という悪影響にならないようにすることも考えて取り入れてみましょう。

デモサンプル

それでは、実際にサンプルを確認しながら導入方法を見ていきましょう。

・要素が画面内に表示されたタイミングでフェードインしながら表示し、反対に画面から外れるとフェードアウトで消えていくという処理をしています。デモサンプルにおいて上下にスクロールをしてみてください。対象となる画像がフェードしながら見えたり消えたりしていると思いますが、このようなイベントを指定していきたいと思います。

jquery.inviewをダウンロード

まずは、Githubに用意されている配布サイトからファイルをダウンロードします。

Github:jquery.inview

jquery.inview.min.jsを読み込む

jsフォルダの直下に配した場合は以下のように記述します。

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

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

イベント発生を適用したい要素にクラス名を指定する

サンプルでは、フェードインさせたい要素<div>に対して、クラス名「.fadebox」という名前を付けておきます。

<div class="fadebox">フェードボックス</div>

1	<div class="fadebox">フェードボックス</div>

HTMLを記述

同じ要素を左詰めで複数個配置しておきます。スクロールにより新たに表示領域に入ってきた要素がフェードインで表示されるようになっています。

<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>

<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>
<div class="fadebox"></div>

CSSを記述

floatで左に流し込み、マージンを5pxずつ取っています。

.fadebox {
	width:300px;
	height:200px;
	background:#b7dad3;
	background:url('../images/road.jpg') no-repeat;
	float:left;
	margin:5px;
}

.fadebox {

width:300px;

height:200px;

background:#b7dad3;

background:url('../images/road.jpg') no-repeat;

float:left;

margin:5px;

}

「.fadebox」の背景画像に下の画像をW:300 H:200pxで配置しています。

road.jpg

javascriptを記述

基本となる書き方は以下のようになります。

要素に「.fadebox」を指定する場合は以下のように指定すればOKです。

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

$('.fadebox').on('inview', function(){

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

});

ここからは実際に「.fadebox」に対して、要素が画面内に表示されたときににアニメーションを実行する処理を記述していきます。

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

$(function() {

$('.fadebox').css('opacity', 0);

$('.fadebox').on('inview', function(event, isInView, visiblePartX, visiblePartY) {

if (isInView) {

$(this).stop().animate({opacity: 1}, 500);

}

else {

$(this).stop().animate({opacity: 0}, 500);

}

});

</script>

「500」と指定されている部分でフェードインの速度を調整することができますので、お好みで指定してください。

以上になります。今回のサンプルは、同一要素が並んでいる場合の表示方法になりますが、幾つかの要素がそれぞれ違う動きをさせることもできますので、次回はそういったパターンも解説できたらと思います。