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

## 目次
- fullPage.jsとは？
- 準備
- 使用方法
- オプション


## fullPage.jsとは？

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

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

【縦にスクロールできるよ】
![スクリーンショット 2023-12-16 15.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/e207886a-be8d-5ee0-0673-41036b1ec026.png)

【横にもスクロールできるよ】
![スクリーンショット 2023-12-16 15.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/d4eb74ce-4276-fe0e-2564-7ad5b0200948.png)

## 準備

fullPage.jsを使うには以下の3つの方法があります。
 1. cdn
 2. npm
 3. ダウンロード

### cdnの場合

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

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

### npmの場合

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

その後head内に以下のように貼り付けましょう。
真ん中のvendorsと書いてあるのは任意で取り入れましょう。
```html
<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
![スクリーンショット 2023-12-16 15.15.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/f840aaaa-99a0-f475-9f71-1c5b67621e83.png)

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

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

あとはhead内に使いますよと記述するだけです。
```html
  <link rel="stylesheet" href="css/fullpage.css">
  <script src="js/fullpage.js"></script>
```

### jQueryを忘れないでね

fullPages.jsはjQueryに依存しているのでjQueryもhead内に取り入れてください。
```html
  <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が入ります。

```html
<!-- フルページを使う準備 -->
<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は使える状態です。

```javascript
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など）


以下のように使用する場合が多いです。
```javascript
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!");
		}
	}
});

```

## まとめ

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