javascriptのOnePageScrollを使って、サイトを作ってみる！

こんにちは！keitaです♪

これまでPHPをメインにブログを書いてきたのですが、
最近クライアントサイドのプログラム言語についても触れるようになってきましたので、そちらの方もブログで取り扱っていきたいと思います！

となると、欠かせなくなっていくのがjavascriptですね。。
正直、javascriptは機能が多すぎて、必要最低限以外なところは見て見ぬふりをしていたのですが、とうとう向き合うときが来たというところですかね（笑）

今回触れていくのは、「One Page Scrool」という機能です。
この機能はjavascriptのライブラリである「jQuery」というもののプラグインの一つで、１ページごとのコンテンツをスクロールしながら入れ替えていくことのできるものとなっています。

言葉だけだと難しいので早速作成していきましょう！

作るもの

Webサイトを作る前にとっても大事なことである作るものを定義していきましょう。
今回は、「One Page Scrool」という機能を試していくという目的なので、簡単なものにしていこうと思います。

下記のように設定します。

ーーーーーーーーーーーーーーーーー

【サイトタイトル】私が好きな国ランキング
【内容】
１位：台湾
➡ジブリの千と千尋の神隠しの街並みとしているといわれているところに行ってみたい
２位：イギリス
➡街並みが好き
３位：イタリア
➡ベネチアの水の都に興味がある
【ページ数】４ページ
【使用ツール】
エディター：VScode
画像:Pixabay ※いつもお世話になってます！！

ーーーーーーーーーーーーーーーーー

こんなところでしょうか。
本来なら、画面のイメージ図とかも作成した方がいいのかもしれませんが、今回は省略します。

ではさっそく作っていきましょう！

必要なものをそろえる

「One Page Scrool」を使うには、下記２つのファイルが必要となります！
・jquery.onepage-scroll.min.js
・onepage-scroll.css

これは、こちらからダウンロードして使わせていただきましょう！

あと、jQueryの読み込みも必要になってきます！すでに使い方を知っている方は各々の読み込み方で問題ないのですが、「は？なにを言っているの？」という方は下記コードをHTMLのBody内に書く必要があることを覚えておいてください！

ーーーーーーーーーーーーーーーーー

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

ーーーーーーーーーーーーーーーーー

と必要なものはこんな感じです。
それでは書いていきます！

作成していこう

では作成していきます。
まずはHTMＬからです。下記のようになります！

ーーーーーーーーーーーーーーーーー
【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<link rel="stylesheet" href="index.css"><link rel="stylesheet" href="onepage-scroll.css">
</head>

<body>
<div class="main">
　<section class="inner1">
　　<div class="content">
　　　<div class="font">
　　　　<h1>keitaの行きたい国ランキング</h1>
　　　　　<p class="txt">
　　　　　私が行きたいな～と思っている国をランキング形式で紹介します♪
　　　　　</p>
　　　 </div>
　　</div>
　</section>
　<section class="inner2">
　　<div class="content">
　　　<div class="font">
　　　　<h1>１位台湾</h1>
　　　　　<p class="txt">ジブリファンの私が行きたくないはずがない！!
<br>千神風の建物が多いとのことなのでぜひ行ってみたい！！</p>
</div>
　　</div>
　</section>
　<section class="inner3">
　　<div class="content">
　　　<div class="font">
　　　　<h1>２位イギリス</h1>
　　　　　<p class="txt">すごい街並みがおしゃれ！！
<br>こんな街なら散歩が楽しそう♪</p>
　　　</div>
　　</div>
　</section>
　<section class="inner4">
　　<div class="content">
　　　<div class="font">
　　　　<h1>３位イタリア</h1>
　　　　　<p class="txt">イタリアといえばベネチアが有名！！
　　　　　<br>水の都で幻想的な日々を過ごしてみたいものです～</p>
　　　</div>
　　</div>
　</section>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.onepage-scroll.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

ーーーーーーーーーーーーーーーーー

こんな感じです！
では、javascriptを書いていきます！

ーーーーーーーーーーーーーーーーー
【main.js】
$(function () {
$(".main").onepage_scroll(
{
sectionContainer:"section",
loop:false,
}
);
});

ーーーーーーーーーーーーーーーーー

となります。
処理は、「main内で「One Page Scrool」を発生させ、sectionごとに区切ります！
ループをしませんよ」という感じです。

本来なら、自作したindex.cssも記載した方がいいかもしれませんが、長くなってしまうので、割愛させていただきます。
興味のある方は最後にソースコードのＵＲＬを貼るので参照にしてみてください！

とコードが完成です！
次は、動作確認をしてみましょう！