fullPage

サンプル

概要

公式
画面いっぱい！
ページを画面いっぱいに、スクロールで丸々移動してくれます。パワポのスライドや紙芝居みたいな感覚ですね。
企業HPでも似た様な紙芝居形式のデザインのサイトをよく見かけます。

サンプルでは設定値を色々いじれて、一枚目で現在の設定を出力するようにしてあります。

2019.07

やりかた

公式サイトでDownloadボタンを押してを「fullPage.js-master.zip」手に入れ、解凍しましょう。


「src」フォルダにある「fullpage.css」と「fullpage.js」を自サイトの場所へコピーします。


まず、headerに以下のコードをコピペします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="ファイルの場所/fullpage.css" />
<script type="text/javascript" src="ファイルの場所/fullpage.js"></script>
<script type="text/javascript">
    $(function() {
        new fullpage('#fullpage', {
            //ここでオプション設定
        });
    });
</script>

2、3行目のファイルの場所は書き換えてください。
7行目がオプション設定部分です。詳細はこちらにまとめました。

次に、bodyの部分です。fullPageにしたいところを<div id="fullpage">～</div>で囲います。
基本は下ように、1ページにいれる要素を<div class="section">～</div>で囲います。

<div id="fullpage">
    <div class="section">
        <!-- 1ページ目 -->
    </div>
    <div class="section">
        <!-- 2ページ目 -->
    </div>
    <div class="section">
        <!-- 3ページ目 -->
    </div>
</div>

横にスライドするページは、<div class="section">～</div>の中に、<div class="slide">～</div>を並べます。
下では2ページ目に3枚分の横スライドページ3枚を作っています。

<div id="fullpage">
    <div class="section">
        <!-- 1ページ目 -->
    </div>
    <div class="section">
        <!-- 2ページ目 -->
        <div class="slide">
            <!-- 2.1ページ目 -->
        </div>
        <div class="slide">
            <!-- 2.2ページ目 -->
        </div>
        <div class="slide">
            <!-- 2.3ページ目 -->
        </div>
    </div>
    <div class="section">
        <!-- 3ページ目 -->
    </div>
</div>

もし、ページを開いたときに1ページ目以外から始めたい場合は、classに「active」を追加します。
下ではページを開いたときに2ページ目が最初になるようにしています。

<div id="fullpage">
    <div class="section">
        <!-- 1ページ目 -->
    </div>
    <div class="section active">
        <!-- 2ページ目 -->
    </div>
    <div class="section">
        <!-- 3ページ目 -->
    </div>
</div>

オプション

サンプルをいじると設定値を出力してくれるので、好きな設定を選んでこの部分に差し替えてください。
もちろんページ枚数ぶん必要なオプション値や、色などは変えてくださいね。