More than 5 years have passed since last update.

[jQuery]inview.jsを使って横並び要素を順に表示させる方法

jQuery

Last updated at 2017-07-23Posted at 2017-07-23

画面に表示されるタイミングでアクションを起こしたい時に便利な、inviewというjQueryプラグインがあります。
その要素の位置までスクロールしたらフェードインで表示する、といったエフェクトを簡単に実装出来るので大変便利に使っているのですが、横並び＋複数行の要素を順に表示させるのに手こずったので、その時に処理をメモしておきます。

やりたいこと

以下のイメージのように、画面内に表示されたタイミングで、横並び要素が順に表示（フェードイン）する。

▼完成イメージ

コード

HTML

jQueryとinview.jsを読み込みます。

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

順に表示させる要素.itemは、包括要素.columnで囲います。

<div class="column"><!-- 全体を囲う包括要素 -->
	<div class="item"></div><!-- 順に表示したい要素 -->
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div><!-- /.column -->

CSS

/* 包括要素 */
.column {
	padding-bottom: 50px;
}

/* 順に表示したい要素 */
.item {
	display: none;		/* デフォルトは非表示にしておく */
	float: left;		/* 今回はfloat指定 ※理由は後述 */
	margin-top: 50px;	/* 上下にmarginを入れるならjsにも要設定 */
	width: 25%;			/* 100% ÷ 一行に並べる要素数 */
	height: 8em;		/* 任意の値。要設定 */

	/* 以下二行は本サンプル用のスタイル */
	line-height: 1;
	counter-increment: item;
}




/* 以降は本サンプル用のスタイル */
.item::before {
	content: counter(item);
	display: block;
	margin-top: 1.5em;
	text-align: center;
	font-size: 2em;
}

.item:nth-of-type(odd) {
	background-color: #dddddd;
}

.item:nth-of-type(even) {
	background-color: #efefef;
}

.bottom {
	padding: 10%;
	background-color: #A4CDFF;
	text-align: center;
}

.scroll p {
	padding-top: 20%;
	text-align: center;
	font-size: 3em;
}

jQuery

$(function() {
	var getHeight = 0;

	$('.item').each(function(){
		// 要素の高さを合算
		// ただし、margin-top:50px;なので、.itemの高さ+50px の計算にする）
		getHeight = getHeight + ($(this).outerHeight() + 50);
	});

	getHeight = (getHeight / 4); // 一行あたりの要素の数

	// 包括要素の高さを予め指定する
	$('.column').css('height',getHeight);

	// ここから inview.js の設定
	// 包括要素のclass名（.column）を指定
	$('.column').on('inview', function(event, isInView) {
		if (isInView) {
			$(item);	// 表示されたら実行するアクション（関数）名
		}
	});

	// 実行するアクション（関数）の設定
	function item() {
		// 一つ目の非表示要素をフェードインし、その後同じ処理を繰り返す
		// 次の非表示要素をフェードインし、また次の...と順にフェードインする
		// 250はスピード（0.25秒）
		$('.item:hidden').first().fadeIn(250, function () {
			item(); // 繰り返し
		});
	}
});