【fullPage.js】で全画面スクロールを実装してみた #スライドショー

fullPage.jsとは？

Github：https://github.com/alvarotrigo/fullPage.js/#options

Fullpage.jsは名前の通り、「全画面」を一つのページとしてスクロールができるjqueryのプラグインです。つまり紙芝居のようなウェブサイトを作れるということです。

【縦にスクロールできるよ】

【横にもスクロールできるよ】

準備

fullPage.jsを使うには以下の3つの方法があります。

cdn
npm
ダウンロード

cdnの場合

以下のリンクからcdnをコピーしてhead内に貼ってください。
https://cdnjs.com/libraries/fullPage.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js">

npmの場合

fullPages.jsをカレントディレクトリにnpmインストールしましょう。

npm install fullpage.js

その後head内に以下のように貼り付けましょう。
真ん中のvendorsと書いてあるのは任意で取り入れましょう。

<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "easeInOutCubic". -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

ダウンロードする場合

Github：https://github.com/alvarotrigo/fullPage.js/#options

「github > Code > Download Zip」でダウンロードしてください。
ダウンロードが完了したらzipを解凍しましょう。

distフォルダの中にfullpage.cssとfullpage.jsがありますので、カレントディレクトリに入れてください。

あとはhead内に使いますよと記述するだけです。

  <link rel="stylesheet" href="css/fullpage.css">
  <script src="js/fullpage.js"></script>

jQueryを忘れないでね

fullPages.jsはjQueryに依存しているのでjQueryもhead内に取り入れてください。

  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

使用方法

使用方法はとても簡単です。

fullPageを使いたいところにfullpageというidを付与します。
あとは一つのページをsectionごとに区切るだけです。
sectionの中にはslideが入ります。

<!-- フルページを使う準備 -->
<div id="fullpage">
    <div class="section">
        <div class="slide slide01"></div>
    </div>
    <div class="section">
        <div class="slide slide02"></div>
    </div>
    <div class="section">
        <div class="slide slide03"></div>
    </div>
    <!-- sectionの中に複数スライドを入れてもOK -->
    <div class="section">
        <div class="slide slide04"></div>
        <div class="slide slide05"></div>
        <div class="slide slide06"></div>
    </div>
</div>

htmlの準備が整ったらあとは、自分で用意したjsファイルで初期化してあげましょう。
これだけでfullpageは使える状態です。

jQuery('#fullpage').fullpage({
    //ここに任意でオプションを入れていく
});

オプション

オプションはたくさんあるので一部紹介します。

スクロール速度（ scrollingSpeed ）

初期値：7ミリ秒
ミリ秒単位で設定してみましょう。

スクロールバーの有無（scrollBar）

初期値：false
表示したければtrueとしましょう。

最後のコンテンツを下スクロールした際、最初のコンテンツに戻るか（loopBottom）

初期値：false
ループしたければtrueとしましょう。

セクションのpadding（paddingTop、paddingBottom）

初期値：０
セクションにpaddingを追加したければ50pxなどと数値を入れましょう。

縦スクロール時のナビゲーションの有無（navigation）

初期値：false
ドットのナビゲーションを表示したければtrueとしましょう。

navigationの位置（navigationPosition）

初期値：null
縦スクロール用のナビゲーションはleftかrightだけ位置を決めれます。

横スライド用のナビゲーションの有無（slidesNavigation）

初期値：false
横スクロールのナビゲーションを表示したければtrueとしましょう。

slidesNavigationの位置

初期値：null
横スクロール用のナビゲーションの位置はtopかbottomを決めれます。

スクロール後に関数を呼び出す（onLeave）

あらゆるタイミングで発火されるコールバック関数が用意されています。
onLeaveは次のセクションにスクロールされるときに発火されます。

引数は以下の通りです。

origin：どのセクションを指すか
destination：どのセクションに移行する時か
direction：スクロールの方向はupかdownか
trigger：スクロールのトリガーとなったのは何か（wheel, keydownなど）

以下のように使用する場合が多いです。

new fullpage('#fullpage', {
	onLeave: function(origin, destination, direction, trigger){
        // 現在のセクション
		var leavingSection = this;

		// セクション2を下スクロールした時に起きる処理
		if(origin.index == 1 && direction =='down'){
			alert("Going to section 3!");
		}

        // セクション２を上スクロールした時に起きる処理
		else if(origin.index == 1 && direction == 'up'){
			alert("Going to section 1!");
		}
	}
});

まとめ

最低限のオプションでもカッコよく全スクロールできるウェブサイトが作れちゃいます！
ぜひ使ってみてください〜

【fullPage.js】で全画面スクロールを実装してみた

目次