fullpage.jsを実装する方法【2024】

コンテンツを１ページずつフルスクリーンでスクロール表示することができるライブラリ、

「fullpage.js」の使い方を簡単に解説します。

fullpage.jsの使い方

まずはサンプル

まずはサンプルをみてみましょう。

https://codepen.io/Yukiwebcreate/embed/mdRGyPK?height=500&theme-id=dark&default-tab=result&user=Yukiwebcreate&slug-hash=mdRGyPK&pen-title=fullpage01&name=cp_embed_1

※フルサイズ推奨。こちらのリンクからご覧ください。

さて、実際に動かしてみるとマウススクロールで１ページずつ動くのがわかると思います。

1ページずつ画面のサイズピッタリにコンテンツを表示して、スライドのようにサイトコンテンツを表示することができるのでコンテンツのインパクトを出したり、ストーリー風に何かを伝えたり、一味違うページ制作が可能です。

必要なもの

まずは他のjsライブラリと同じく、

「fullpage.js」自体をDLもしくはCDNで読み込んでくる必要があります。

今回はCDNを使用していますので、CDN読み込みで解説を進めます。

ポイントはfullpage.jsの2系を選択することです。

３系や4系以上は有料になるのでライセンスを購入しないと利用できません。

無料で利用したい際は2系の最新「2.9.7」を使うのがいいでしょう。

※jQueryも必要になるので任意のverを利用してください。今回はサンプルで3.6.0を使用。

まずはfullpage.jsの公式サイトからfullpage.jsのCDNをコピーし、</body>前に下記のscriptを、

CSSの読み込みを<head>タグの中にペーストしましょう。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/scrolloverflow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>

CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.css">

これらの準備ができたらHTMLのマークアップに移ります。

HTMLの記述

fullpage.jsの利用に最低限必要なHTMLの記述は下記です。

h1やimgはスライド内のコンテンツになるため任意で変更OK。

　　　　<div id="fullpage">
            <div class="section">
                <div class="slide slide01">
                    <h1>text1</h1>
                </div>
            </div>
            <div class="section">
                <div class="slide slide02">
                    <h2>text2</h2>

                </div>
            </div>
            <div class="section">
                <div class="slide slide03">
                    <div class="text-box">
                      <h2>text3</h2>
                    </div>
                </div>
            </div>
            <div class="section">
              <div class="slide layer">
                <h2>text 04 text 04 text 04 text 04 text 04 text 04 text 04 </h2>
                <img src="abc.jpg" alt="">
              </div>
            </div>
        </div>

fullpage.jsでフルページにしたい部分をfullpageというid名の要素で囲い、

スライド１枚あたりをsectionクラスで囲います。その中にslideを配置し、その中に任意のコンテンツを配置します。

また、fullpage.jsを動かすためにjQueryの記述が必要ですので、下記のscriptを</body>の手前にコピペしましょう。

　　　　<script>
            jQuery(function () {
                jQuery('#fullpage').fullpage({
                    scrollOverflow:true,
                });
            });
        </script>

これで基本的な作業はすべて終了です。

スライド風に動かすだけならこれで十分です。簡単ですね。

オプションでカスタマイズ

さて、だいたいの場合はこれだけで満足はしないと思います。

例えば要望として

あるスライドの時は横に２枚ならべて矢印で切り替えたいんよな～

画面内に収まらないコンテンツはスクロールできたほうがええわ

ページネーションつけたい

などがあると思います。

それぞれについて解説していきます。

１スライド内にさらに横スクロールで複数配置

こちらはHTMLの構造を少し書き換えるだけで実装できます。

さきほどのHTMLのsectionの中身を

<div class="section">
    <div class="slide slide01"></div>
    <div class="slide slide02"></div>
</div>

こうするだけで自動判別され、横にふたつのスライドが並び矢印で移動ができるようになります。

画面内に収まらないコンテンツをスクロール可能にする

こちらは既に上で記述してるのですが、script内に書いた

<script>
    jQuery(function () {
        jQuery('#fullpage').fullpage({
            scrollOverflow:true,
        });
    });
</script>

この「scrollOverflow:」を「true」にすることでスクロール可能になります。

記事の一番上で紹介したcodepenでは、ページの最後のスライドが縦長の画像になっていて、それが画面内に収まらないコンテンツのためスクロールが可能になっているのがわかると思います。

長文のテキストなどを配置しても同じようにスクロールできるのでめっちゃ便利ですね。

ページネーションの実装

ひとつ上で紹介したscript内に追記するかたちで

navigation:true,
navigationPosition: 'right',

を書き足せばページネーションが右側に表示されます。

navigationPositionをleftにすることで左側への表示も可能です。

ページネーションの色はページネーションのクラスにCSSをあてれば簡単にデザイン変更可能です。

まとめ

カスタマイズが簡単にできるオプション値もたくさん用意されたfullpage.js。

今回はオプション値の紹介も簡単なものに留めましたが公式のgithubなどをのぞけばたくさんのオプション値が紹介されているので、希望のカスタマイズも簡単に実装できるかもしれません。

下記は公式のドキュメントのリンクです。

コードを０から書く（いわゆるスクラッチ）より断然ラクだし自由度高いのでみなさんもぜひ試してみてください。

点
ROOV