税理士目指す人のブログ

筋トレや読書のことをはじめとして、プログラミングその他日常生活における様々なことについて書いていきます。

Output Blog

主に筋トレ・プログラミングについて書きます

トップ > プログラミング > Fullpage.js使い方まとめ【2020.03最新版】

Fullpage.js使い方まとめ【2020.03最新版】

プログラミング

スポンサーリンク



"Fullpage.js使い方まとめ【2020.03最新版】"
https://alvarotrigo.com/fullPage/ より引用

フル画面コンテンツを簡単に作成できるFullpage.js。

僕は色々調べながら使っていました。

しかしながら、情報が古いものが多く英語での検索を強いられる場面もあったので、

本記事では最新版のFullpage.jsの使い方を日本語にして紹介します。

今回は簡単のため、需要が多そうなオプションだけに絞って紹介します。

それではご覧ください。


Fullpage.jsの使い方①ファイルの読み込み

まずはファイルを読み込みます。

ローカルにダウンロード

Fullpage.jsを扱うのに必要なファイルがすべて揃ったものが公式で配布されているのでダウンロードします。

https://github.com/alvarotrigo/fullpage.js/archive/master.zip

上記URLをクリックすると、ダウンロードされます。

解凍すると、
"ディレクトリ構造"
このようなディレクトリ構成になっていると思います。

Fullpage.jsを使ったサイトを作るための開発用ローカルファイルに移すファイルは以下です。

  1. vendors/easing.js または vendors/easing.min.js
  2. vendors/scrolloverflow.js または vendors/scrolloverflow.min.js
  3. src/fullpage.css
  4. src/fullpage.js

 .min.jsというのは元の .jsファイルを圧縮したものです。

どちらでも使えますが、.min.jsを使うほうが軽くなります。

 
これら4つを移しておきます。


そして index.htmlの"head"要素内に、

<link rel="sytlesheet" href="fullpage.css">

を書きます。

hrefの参照先は、各々のディレクトリ構成に従って書き換えてください。

次にindex.htmlの"/body"要素の直前に

<body>
～～本文～～
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/easing.min.js"></script>
<script src="js/fullpage.js"></script>
<script src="js/scrolloverflow.min.js"></script>
<script src="js/script.js"></script>
</body>

のように書きます。
srcの参照先は、適宜書き換えてください。
もし、jsフォルダにすべて入れてある場合は、完全にコピペでokです！
script.jsは自分で作成しておいてください。(中身は空でOK)

cdnを使用

スタイルシート周辺
head内に、

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.css" integrity="sha256-+dIh4jG2jQTHZwW81yUo8h6tzXWcNumyNL5XPZbwp1E=" crossorigin="anonymous" />


body周辺のscript関係

<body>
～～本文～～

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.js" integrity="sha256-caNcSA0LvOCX90PTuEbwl+V09xPMca13CJUasl+VCtk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/vendors/easings.min.js" integrity="sha256-se1LVUgnBaGcZvC0A7xkl3Lea7CRU5BQqUQT8ZvdH4A=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/vendors/scrolloverflow.min.js" integrity="sha256-bmjt2PwiRoDWtD/Zbj9lJdkCvFIzYY7W/6q3ZcVjlu8=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>

script.jsは自分で作成しておいてください。(中身は空でOK)

実際に書いていく

index.html部分

<div id="fullpage">
<div class="section">section</div>
<div class="section">section</div>
<div class="section">section</div>
<div class="section">section</div>
</div>

とFullpageにしたいところを上記のように、#fullpageでくくり、それぞれにsectionクラスを与えます。

注意点ですが、この際 

<div class="section">

部分には idを付与しないようにしてください。
idはJavascript部分でアンカーとして付与します。
なお、

<div class="section main">

のように、クラスを複数持たせることは可能です。

script.js部分

//script.js
$(document).ready(function() {
 $('#fullpage').fullpage();
});

これで初期化され、動きます。
とりあえず使いたい方は、ここまででフルスクリーンページの完成です。

オプション編

アンカーやグローバルメニューの設定など

ここはほとんど全員使うと思います。
例えば、グローバルメニュー周辺のhtml構造が以下のようなときを考えます。

<ul id="global-menu">
<li data-menuanchor=top" class="active"><a href="#top">Top Page</a></li>
<li data-menuanchor="1st"><a href="#1st">1st page</a></li>
<li data-menuanchor="2nd"><a href="#2nd">2nd page</a></li>
<li data-menuanchor="last"><a href="#last">last page</a></li>
</ul>

グローバルメニューは、aタグの参照先をidとして書きます。
このidは下記javascript部分を記述すると、自動的に付与されます。
このように書いておくと、グローバルメニュークリック時に、そのページまでスムーススクロールを自動で行ってくれます。

script.jsについて、

//script.js
$(document).ready(function() {
 $('#fullpage').fullpage({
     anchors: ['top', '1st', '2nd', 'last'],
     menu: '#global-menu'
});
});

という形で書きます。

横スライド設定

<div class="section">
<div class="slide" data-anchor="slide1">Slide</div>
<div class="slide" data-anchor="slide2">Slide</div>
</div>

ナビゲーション(インジケーター)

パラメータ 初期値 Description（概要）
navigation false 設定をtrueにすると、黒丸のナビゲーションが表示されます。
navigationPosition none 上記のナビゲーションの位置を”left”もしくは”right”に設定出来ます。
navigationTooltips [] ナビゲーションにマウスオーバーした時のtooltipsの内容を定義出来ます。

例:navigationTooltips: [‘firstSlide’, ‘secondSlide’]
showActiveTooltip false アクティブ（表示されている）ページのtooltip名を表示させます。
slidesNavigation false 横スライドのナビゲーションを表示させるかどうかを設定。
slidesNavPosition bottom 横スライドのナビゲーションの表示位置を”top”か”bottom”で設定。
scrollOverflow false その内容がそれの高さより大きい場合に、ページ（セクション）のためにスクロールを作成するべきかどうか定めます。
ナビゲーションtrueの場合、デフォルトで右側に表示されます。
scrollOverflowは、コンテンツが収まりきらない場合、そのページ内でのスクロールのON・OFFです。

onLeaveオプションについて

onLeaveはページを移動した際にjavascriptの関数を実行できる機能です。
僕のポートフォリオをご覧いただくとわかると思いますが、プロフィールのところにアニメーションを設定しています。
このアニメーションは、onLeaveコマンドを使うことで可能にしています。

  1. ページ遷移の後、要素を遅れて表示させたい場合
  2. ページ遷移の後、アニメーションを表示させたい
  3. 特定ページへの遷移時に、何かを行いたい

このような方はこのコマンドを使いましょう。

具体的な使い方は、

$(document).ready(function() {
 $('#fullpage').fullpage({
      onLeave: function(index,nextIndex,direction) {
           var index = index.index;
           if(index == 0 && direction == 'down') {
                   console.log("Move to 1stpage");
}}
});
});

というような感じ。
引数indexから、index.indexで現在のページのインデックスを取り出します。(indexは0はじまり)
directionはスクロールを意味し、"up"か"down"かがあります。
この例の場合、一番最初のページからスクロールダウンした状態です。
そのとき、コンソールに文章を表示します。

このオプションは、古い情報のものが多く、他サイトのものをコピペしただけではできない場合があります。
しかし、このサイトはコピペだけで動きますのでご安心ください。

オプション集

一般編

パラメータ 初期値 説明
controlArrows true スライドボックスに左右の矢印を表示させるかどうかを決めるオプション。
verticalCentered true ページ内のコンテンツの縦方向の位置を中央にするかどうかを決めるオプション。
コンテンツが多く収まりきらなそうな場合は、別途スタイルシートのvertical-alignからも設定できる。
scrollingSpeed 700 スクロールする時間をms(ミリ秒)で設定できる。
css3 true スクロールの動きをCSS3で実行するかJavaScriptで実行するかを端末情報で判断して変換する事が出来るオプション。このオプションがtrueの場合ブラウザがCSS3をサポートしていない環境ではjQueryの代替が代わりに使用されます。ブラウザがCSS3をサポートしていると、モバイルデバイスなどの動きをスピードアップするのに貢献します。

まとめ

Fullpage.jsの使い方をまとめました。 基本、このサイトに書いてあることで事足りると思います。

スポンサーリンク