【js】スクロールで下部コンテンツ読み込み【DEMO】

ホーム » N-PLUS 全記事一覧 » DEMO » 【js】スクロールで下部コンテンツ読み込み【DEMO】

【js】スクロールで下部コンテンツ読み込み【DEMO】

JQuery・JS／DEMO

【js】スクロールで下部コンテンツ読み込みソースコードを下記に記載

以下からJQuery「inview.js」をダウンロード。「jquery.inview.min.js」を使用する。

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

■JS CODE

	<script src="js/jquery.inview.min.js"></script>
	<script type="text/javascript" >
		// スクロールして表示領域に入ったらclass付与
		$(function () {
			$(".js-fadeUp").on("inview", function () {
				$(this).addClass("is-inview");
			});
		});
	</script>

■CSS CODE

/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .1s; /* フェード開始を0.5秒遅らせる */
}

■HTML CODE

	<blockquote class="container">
		<p class="box js-fadeUp">クラスのcontainer boxは気にしない</p>
	</blockquote>