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

HTML&CSS

こんにちはtakosanです。

コンテンツを1ページずつフルスクリーンでスクロール表示することができるライブラリ、「fullpage.js」の使い方を簡単に解説します。

fullpage.jsの使い方

まずはサンプル

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

See the Pen fullpage01 by yukiwebcreate (@Yukiwebcreate) on CodePen.

※フルサイズ推奨。右上の”EDIT ON CODEPEN”から”Change view”→”Full page view”としていただくとキレイに見えると思います。

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

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

必要なもの

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

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

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

まずはこちらからfullpage.jsのCDNをコピーし、</body>前にペーストしましょう。

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

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

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

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

JS

CSS

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名の要素で囲い

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

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

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

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

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

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

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

例えば要望として

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

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

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

などがあると思います。

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

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

こちらは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',

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

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

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

まとめ

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

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

JS一から書くより断然ラクだし自由度高いのでみなさんもぜひ試してみてください。

タイトルとURLをコピーしました