【jQuery】ページスクロールを実装、pagePiling.jsの使い方!!

シュウ

今回は【jQuery】ページスクロールを実装、pagePiling.jsの使い方!!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
プラグインのpagePilingを使って「ページスクロール(縦方向)」をしたい方向け
今回はpagePilingについて解説しております。

今回は、「pagePiling」についての解説になります。
「pagePiling」になりますが、今でも簡単で使いやすいプラグインになっております。

イメージ図は上記のようになります。
左上には、メニューがあり、サイドには各セクションのボタンが設置され、クリックすると各セクション毎にスクロールします。
スクロールアニメーション機能の種類も豊富にあり、今回はその一部の「scrollingSpeed」について解説します。

[記事の内容]

pagePilingについて

pagePilingとは、「ページスクロール(縦方向)」のことを示します。
スクロールアニメーション機能のタイプは、「callbacks、backgrounds、looping」など何パターンか用意されております。
横スクロールやパララックス風のアニメーション、スクロールのループなどが用意されております。

jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「pagePiling」をダウンロードしましょう。

●xZoomにアクセス: 1https://github.com/alvarotrigo/pagePiling.js

●「Code」ボタンをクリック: 2

●「Download ZIP」ボタンをクリック: 3

必要なファイルについて

ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「pagePiling.js-master」をご確認ください。

●cssファイル: 1「dist」 > 「jquery.pagepiling.css」

●jsファイル: 2「dist」 > 「jquery.pagepiling.min.js」

●cssファイル: 3「examples」 > 「examples.css」の3点を使用します。

ポイント！
「examples.css」には、デフォルトのCSSが指定されております。
一部を抜粋して記述しても問題ありません。

<!--css-->
<link rel="stylesheet" href="css/jquery.pagepiling.css">
<link rel="stylesheet" href="css/examples.css">
<!--js-->
<script src="js/jquery.pagepiling.min.js" type="text/javascript"></script>

また、「pagepiling.min.js」を使用する際には、pagepilingを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--css-->
<link rel="stylesheet" href="css/jquery.pagepiling.css">
<link rel="stylesheet" href="css/examples.css">
<!--js-->
<script src="js/jquery.pagepiling.min.js" type="text/javascript"></script>
<!--1:scrollingSpeedの場合-->
<script type="text/javascript">
$(document).ready(function() {
	$('#pagepiling').pagepiling({
		menu: '#menu',
	    	anchors: ['page1', 'page2', 'page3'],
			sectionsColor: ['#283455', '#d35e71', '#000'],
			navigation: {
			    'position': 'right',
			   	'tooltips': ['紺色', '桃色', '黒色']
		}
	});
});
</script>

「pagepiling.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

次に、jquery本体のプラグイン設置します。
今回は2つ目のパターンを採用して解説します。

● 1つ目は、ファイルをダウンロードして使用するパターン、
● 2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.pagepiling.min.js" type="text/javascript"></script>
<!--1:scrollingSpeedの場合-->
<script type="text/javascript">
以下省略
</script>

必ず、jquery本体のプラグイン上、pagepilingを下に設置しましょう。
jqueryをダウンロードしたい方は、こちらのリンクから。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】ページスクロールを実装...</title>
<!--css-->
<link rel="stylesheet" href="css/jquery.pagepiling.css">
<link rel="stylesheet" href="css/examples.css">
</head>
<body>

　コンテンツが入ります。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.pagepiling.min.js" type="text/javascript"></script>
<!--1:scrollingSpeedの場合-->
<script type="text/javascript">
以下省略
</script>
</body>
</html>

「ページスクロール」の設定について

次に、「ページスクロール」の設定について解説します。

「ページスクロール」の設定について

デモサイトはコチラから。
基本構造の書き方は以下のようになります。

「ページスクロール」

<!--メニューバー-->
<ul id="menu">
	<li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
	<li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
	<li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
</ul>

<div id="pagepiling">
	<!--コンテンツ-->
	<div class="section" id="section1">
	    <h1>タイトル</h1>
		<div><img src="sample01.jpg" alt=""/></div>
	</div>
	<!--コンテンツ-->

	<div class="section" id="section2">中身省略</div>
	<div class="section" id="section3">中身省略</div>
</div>

/*--CSS基本は変更 可--*/
/*--
「examples.css」 から変更した箇所を一部抜粋
必要な箇所のみ変更してください。
--*/
#section1 h1,
#section2 h1,
#section3 h1{
	color: #fff;
	font-size: 30px;
	font-weight: normal !important;
}
#section1 img,
#section2 img,
#section3 img{
	width: 50%;
	margin: 20px auto;
	border: solid 5px #fff;
}

$(document).ready(function() {
	$('#pagepiling').pagepiling({
		menu: '#menu',
	    	anchors: ['page1', 'page2', 'page3'],
			sectionsColor: ['#283455', '#d35e71', '#000'],
			navigation: {
			    'position': 'right',
			   	'tooltips': ['紺色', '桃色', '黒色']
		}
	});
});

今回は、ul id="menu"でメニューバーを作成します。
コンテンツ部分は、id="pagepiling"で全体を囲みます。
各ブロック(セクション)には必ず、id="〇〇"を指定しておきましょう、各ブロックの中身は自由です。

javascriptでは、#menuを指定し、anchorsを指定することで、「アンカー」が適用されます。
例:「https://〇〇〇〇…pagepiling.html#page1」のようになります。

sectionsColorは、各ブロックの背景色になります。
positionは、サイドバーのボタンの位置になり、「left、right」のみ指定可能です。
tooltipsは、サイドバーのボタンをホバーした際に出る文字になります。

まとめ

今回はこれで以上です。

POINT

pagePilingとは、「ページスクロール(縦方向)」のことを示します。
必要なファイルはjquery.pagepiling.cssと、jquery.pagepiling.min.js、examples.cssの3点になります。
こちらにデモサイトを用意しました。
pagePilingダウンロードサイトはこちらから