FullPage.jsプラグインって凄いんだよ、応用的な部分を紹介！

どうもですよ、はやちですよ(◞‸◟)

今回は、よく見る画面いっぱいのセクションがワンスクロールするプラグイン「FullPage.js」の、もっと応用的な方法をご紹介したいと思います。

基本的な使い方

導入方法

npmでコマンドをささっとインストール！
npm install fullpage.js
使用したいjsファイルにささっとimport！

import FullPage from 'fullpage.js';

ベタで欲しい方はこちらにてDLしてくださいまし( ˇωˇ)☝
FullPage.js

HTML

ページは必ずsectionタグでコーディングし、親要素にidつけてトリガーを用意します。

<div id="js-fullpage">
　　<section class="section section-1">
　　　省略
　　</section>
　　<section class="section section-2">
　　　省略
　　</section>
　　<section class="section section-3">
　　　省略
　　</section>
</div>

JS

idにfullpageを呼び出してあげましょう。
ついでにお好みでeasingとscrollingSpeedも指定してあげましょう( ˇωˇ)☝

const $target = $('#js-fullpage');

$target.fullpage({
  easing: 'easeOut',
  scrollingSpeed: 500
});

できたのはこんな感じ( ˇωˇ)☝

よくある実装はこんなかんじになります。

「上に戻る」「下に進む」ボタンを付ける

上下に動くボタンをつけてみます( ˇωˇ)☝

html

上下の矢印にdata要素をつけて、次のページの番号をつけます。

<section class="section section-1">
    <div class="section-inner">
    <div class="btn btn-down" data-page="2"> //下に進むbutton
      <svg>ここに矢印のsvg</svg>
    </div>
    <div class="section-title">
      <h1>FullPage.js</h1>
    <h2>Basic version</h2>
    <h3>Blue</h3>
    </div>
    <svg>顔のsvg</svg>
    </div>
</section>

js

押した矢印からdataの番号をとりだして、Pageを動かすメソッドに番号をつけます。
以下のような感じです。

const $btn = $('.btn');

//ページ送りボタン
$btn.on('click',(e)=>{
    e.preventDefault();
    let movePage = $(e.currentTarget).data('page'); //data要素の番号を取り出す
    $.fn.fullpage.moveTo(movePage); //Pageを動かすメソッドにより出した番号をつける
  });

できあがったものが下のものになります。

moveTo(section,index)について

このメソッドで、ページの引数をひとつだけ指定することで位置を指定していましたが。

moveTo(動かしたいページ,どこまで動かすか指定)
引数を２つ指定してあげると、指定のセクションを動かしたい位置に移動させることもできるので、使い方次第ですね( ˇωˇ)

そのように指定したときの動きがこちらになります( ˇωˇ)

全てのページ数と今いるページの数を出す

フルページ遷移のUIで、全体のページの数と今いるページの数を表示させているのはよくあるもの( ˇωˇ)☝

実装するにあたって２つのコールバック関数を使いました( ˇωˇ)☝

afterLoad (anchorLink, index)について

スクロールが終了したあとと、セクションがロードされたときに、コールバックが発生します。

afterLoad(設定されたアンカーリンク,現在のindex);
第一引数で設定されたアンカーリンク、第二引数で現在いた場所のindexを取得することができます。
※今回はanchorLinkの引数は使いません

onLeave (index, nextIndex, direction)について

セクションから離れて新しいセクションへ移行到達時に起動されます( ˇωˇ)☝

onLeave(離脱時のインデックス, 遷移先のインデックス, スクロール方向[up,down]の判定がとれる);
離脱した時のindeｘと遷移先のindexを取得することができます。directionでは、コールバックイベント発火のタイミングでスクロール方向（up,down）をとることができます。
※今回はdirectionｍ引数は使いません

その２つのコールバック関数の動きの例はこちらになります( ˇωˇ)☝

実際の実装

この２つの関数を使って書いてみたのがこちらになります( ˇωˇ)☝

const $target = $('#js-fullpage');
const $current = $('.current');
const $total = $('.total');

//セクションの数を予め出してあげる
const $section = $('.section').length;
$total.append($section);

$target.fullpage({
  easing: 'easeOut',
  scrollingSpeed: 1000,
  //動いている時に動く関数
  onLeave: function (index,nextIndex) {
    //過去の数字を消す
    $('.num').remove();
  },
  //今いる位置を出してくれる関数
  afterLoad: function (anchorLink,afterIndex) {
    
    $current.append('<span class="num">'+ afterIndex +'</span>');
  }
});

onLeave();で過去の数字を消して、afterLoad();で遷移先の数字を表示するように書きました( ˇωˇ)☝

できたのはこんな感じ。

まとめ

いかがでしたか。

コールバック関数内で消すタイミングや出てくるタイミングが指定できることによって、数字まわりのアニメーションも細かく調整ができるのではないかと！ Fullpage.jｓ、まだまだ使えるところがあるな、と思った次第でございます。

でわでわ！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。