動くWebデザイン
アイディア帳

動きを実現する仕組み

Infinite Scroll という無限スクロールを実現するライブラリを使って、スクロールをして要素の最後まで来たら、新しいHTML が読み込まれて下に表示されるようにする。
※ファイルはサーバーに上げないと、動作確認ができません。
デモページから動きをご確認ください

［使用するライブラリ］
＊ jQuery
＊ Infinite Scroll（https://infinite-scroll.com/）

HTMLの書き方

1. head終了タグ直前に自作のCSSを読み込みます。

   <link rel="stylesheet" type="text/css" href="css/9-1-7.css">
   </head>

2. body内に無限スクロールをさせたいコンテンツのHTMLを記載します。

   <div class="wrapper">
   <ul class="article-list"><!--無限読み込みをさせたい要素を囲う親のクラス名をarticle-listに指定-->
   <li>内容</li>
   <li>内容</li>
   <li>内容</li>
   </ul>
   <div class="navigation"><a href="page-2.html">続きを表示</a></div><!--次のページを読み込むきっかけのクラス名をnavigationに指定-->
   </div>

3. 2をコピーして、2 ページ目以降に読み込みたいページをつくります。
   その際、HTMLの名前を任意の名前＋数字（例：page-2.html、page-3.html）にします。

   <div class="navigation"><a href="page-2.html">続きを表示</a></div>
   <!--2ページ目以降はリンク先の数字の部分が自動的に連番が付与されて読み込まれます-->

4. body 終了タグ直前に jQuery、Infinite Scroll、動きを制御する自作のJS の3 つを読み込みます。

   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
   <!--自作のJS-->
   <script src="js/9-1-7.js"></script>
   </body>

自作のCSS内の書き方

/*ローディングが表示されるエリアの設定*/
#infscr-loading {
width:100%;
text-align:center;
margin:20px auto;
}

#infscr-loading img{
	width:30px;/*ローディング画像のサイズ*/
}

自作のJS内の書き方

//無限読み込みInfiniteScroll
	$('.article-list').infinitescroll({	//無限読み込みをさせたい要素を囲う親のクラス名を指定
		navSelector  : ".navigation",//次のページを読み込むリンクを囲んでいるクラス名を指定
		nextSelector : ".navigation a",//次のページにリンクする要素を指定
		itemSelector : ".article-list li",//無限スクロールで表示をさせたい要素を指定
		maxPage : 3,///読み込む全体のページ数。入れないと連番でURLが読まれて404エラーが出る
		animate: true, //アニメーション処理を行う
			loading: {
			finishedMsg: "全ての記事が読み込まれました", //全ての要素が読み込まれた後の終了メッセージ
			msgText: "読み込み中", //ローディング中の表示テキスト
			img: 'svg/loading.svg', //ローディング中の画像を指定
		},
	});

	$('.article-list').hide().delay(100).fadeIn(900);//0.9秒かけてフェードイン