CORDING

初心者向けfullpage.jsの使い方をまとめました

thumb9

サイトデザインを考えている時、国内海外問わずいろんなサイトを見て参考にさせていただいているのですが、最近PCサイトで多く見かけるのが画面いっぱいのサイトデザイン。

 

中にはスクロールするごとに、アニメーションで動きがあるものもあって、すごくかっこよくておしゃれな感じなんです。

 

そんなかっこよくておしゃれなサイトが簡単に作れるフルスクロールするjQueryのプラグインfullpage.jsの使い方をまとめてみました。

 

私のポートフォリオにも使用してみたので、こちらをベースに紹介していきますね。

 

 

fullpage.jsの導入方法

 

  1. fullpage.jsのパッケージをダウンロード
  2. CSS/jQueryプラグインファイルをディレクトリにアップ
  3. 外部ファイルとしてheadタグに追記
  4. HTMLにID/クラス名を記述
  5. fullPage.jsを実行する
  6. fullPage.jsのオプションの設定

 

1.fullpage.jsのパッケージをダウンロード

 

まず、fullpage.jsのマスターデータをまるっとダウンロードします。

 

 

ダウンロードできない場合は、公式デモページのダウンロードから入手してください。

 

2.CSS/jQueryプラグインファイルをディレクトリにアップ

 

ダウンロードして展開すると、下記のようなフォルダとファイルが入っていると思います。

 

images9

 

使用するのはこの中の下記のファイルです。

 

  • jquery.fullPage.css
  • jquery.fullPage.min.js

 

Sassを使いたい時はjquery.fullPage.scssを使います。
minファイルの方が圧縮されていて軽いのでjquery.fullPage.min.jsにしていますが、jquery.fullPage.jsのどちらでも大丈夫です。

 

このファイルを使用するディレクトリにアップします。

 

私のポートフォリオのディレクトリ構成は下記のようになっています。

 

css
– jquery.fullPage.css
– style.css（通常のCSSファイル）
js
– jquery.fullPage.min.js
– contents.js（プラグイン実行用JSファイル）
index.php

 

上記を参考にして、次はheadタグでCSS/Javascriptファイルを呼び出します。

 

3.外部ファイルとしてheadタグに追記

 

index.php

<link rel="stylesheet" type="text/css" href="/css/jquery.fullPage.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/jquery.easings.min.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
<script src="/js/jquery.fullPage.min.js"></script>
<script src="/js/contents.js"></script>

 

この時、jQueryも一緒に呼び出すことを忘れないようにしてください。

 

 

下記は、jQuery1.11.1のバージョンを呼び出しています。

 

index.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 

 

下記はオプションです。CSS3で、スクロールの動きを設定するために使用します。

 

index.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 

 

下記もオプションです。scrollOverflowを使用するために使用します。

 

index.php

<script src="/js/jquery.slimscroll.min.js"></script>

 

これで呼び出しの記述ができたので、次は要素に記述していきますが、今の時点でサーバーにアップし、デペロッパーツールなどでscriptファイルが読み込まれているか確認するといいかもしれません。

 

4.HTMLにID/クラス名を記述

 

fullpage.jsを動かす設定をHTMLに記述していきます。

 

私のポートフォリオ場合ですと、navタグが固定でその他のコンテンツをフルスクロールしたいので、下記ようになります。

 

index.php

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

 

.sectionがスクロールするコンテンツになり、#fullpageがそれを覆うコンテンツになります。

イメージ的にはこんな感じです。

 

images10

 

ここからさらに、一番初めの.sectionに横スライドを入れています。
横スライドは.sectionの中に.sildeを追加するだけです。

 

index.php

<nav></nav>
<main id="fullpage">
	<div class="section">
		<div class="slide"></div>
		<div class="slide"></div>
		<div class="slide"></div>
		<div class="slide"></div>
	</section>
	<div class="section"></section>
	<div class="section"></section>
	<div class="section"></section>
</main>

 

自動的に右ボタンと左ボタンがつくと思います。これらのスタイルは、jquery.fullPage.cssを修正すればカスタマイズできます。

 

実行の準備は完了です。

 

5.fullPage.jsを実行する

 

実行するだけであれば、さすがプラグインなだけにとっても簡単です。contents.jsで下記のように記述するだけなんです。

 

contents.js

$(function(){
	$('#fullpage').fullpage();
});

 

簡単ですね！まずはここまでで、するっとフルスクロールするはずなので確認してみてください。

 

6.fullPage.jsのオプションを設定する

 

fullpage.jsの素晴らしいところは、オプションの設定が細かくできるところですね。
今回特にいいなと思ったのは、コンテンツスクロールした時に呼び出される関数です。

 

私のポートフォリオでは、一番初めのコンテンツの場合に、navを非表示にしたりロゴの画像を大きくしたりしているのですが、その時に使用したのがonLeaveというオプションです。

 

contents.js

var fullpageEvent = function(index, nextIndex, direction){
	//index
	//スクロールするコンテンツの番号

	//nextIndex
	//次に表示されるコンテンツの番号

	//direction
	//upかdownか

	if(nextIndex == 1){
		//ここに初めに戻った時の処理
	}else{
		//それ以外の時の処理
	}
}
$(function(){
	$('#fullpage').fullpage({
		onLeave: fullpageEvent
	});
});

 

その他のオプションは下記にまとめてみたので、参考にしてください。

 

ナビゲーションのオプション

オプション名 初期値 説明
menu ‘#menu’ フルスクロールのメニューの要素名
lockAnchors false メニューのアンカー有効無効
anchors [‘firstPage’, ‘secondPage’] メニューのアンカー先要素（配列）
navigation false 右や左に表示されるフルスクロールのナビゲーション表示設定
navigationPosition ‘right’ フルスクロールのナビゲーションの位置
navigationTooltips [‘firstSlide’, ‘secondSlide’] フルスクロールのナビゲーションに表示される名前（配列）
showActiveTooltip false フルスクロールのナビゲーションに表示される名前の表示設定
slidesNavigation true スライドショーのナビゲーション表示設定
slidesNavigation true スライドショーのナビゲーション位置設定

 

スクロールのオプション

オプション名 初期値 説明
css3 true スクロールの動き設定
css3 true スクロールの動き設定（falseの場合はjavascript）
scrollingSpeed 700 スクロールの動く速度
autoScrolling true スクロールした時に自動的に次の要素を表示するかどうか
fitToSection true コンテンツを自動的に画面に合わせて調整するかどうか
fitToSectionDelay true コンテンツを自動的に画面に合わせて調整する時の速度
scrollBar true 画面デフォルトのスクロールバーを表示するかどうか
easing easeInOutCubic スクロールの動きの種類
easingcss3 ease CSS3を使用するときのスクロールの動きの種類
loopBottom false フルスクロールを最後までした時に、ループするかどうか
loopTop false 一番初めのコンテンツより上にスクロールした時、ループするかどうか
loopHorizontal true スライドショーをループさせるかどうか
normalScrollElements ‘#element1, .element2’ 自動スクロールをOFFしたい要素設定
scrollOverflow false sectionが画面より大きい時にスクロールして表示するかどうか
touchSensitivity 15 タッチデバイスでのスワイプ感度設定
normalScrollElementTouchThreshold 5 タッチデバイスでの要素の重なり設定？
詳細

 

アクセシビリティのオプション

オプション名 初期値 説明
keyboardScrolling true キーボードでのスクロールの有効無効
animateAnchor true URLにハッシュが付いていた時などにスクロールアニメーションするかどうか
recordHistory true スクロールした時にブラウザに履歴を残すかどうか

 

デザインのオプション

オプション名 初期値 説明
controlArrows true スライドショーの矢印の表示設定
verticalCentered true 縦方向に中央寄せにするかどうか
resize false 画面サイズを変えた時にリサイズして表示するかどうか
sectionsColor [‘#ccc’, ‘#fff’] フルスクロールコンテンツの背景色設定（配列）
paddingTop ‘3em’ フルスクロールコンテンツの上部の余白設定（固定要素がある時便利）
paddingBottom ’10px’ フルスクロールコンテンツの下部の余白設定（固定要素がある時便利）
fixedElements ‘#header, .footer’ 固定表示する要素設定
responsiveWidth 0 通常のスクロールに変化する幅の設定
responsiveHeight 0 通常のスクロールに変化する高さの設定

 

カスタムセレクタのオプション

オプション名 初期値 説明
sectionSelector ‘.section’ フルスクロールを実行するためのdivに設定するクラス名
sectionSelector ‘.slide’ スライドショーを表示するためのdivに設定するクラス名

 

イベントのオプション

オプション名 初期値 説明
onLeave function(index, nextIndex, direction){} コンテンツスクロール開始時に呼び出される関数
afterLoad function(anchorLink, index){} コンテンツスクロール完了時に呼び出される関数
afterRender function(){} ぺージ読み込み時に呼び出される関数
afterResize function(){} ブラウザの画面リサイズ時に呼び出される関数
afterSlideLoad function(anchorLink, index, slideAnchor, slideIndex){} スライド開始時に呼び出される関数
onSlideLeave function(anchorLink, index, slideIndex, direction, nextSlideIndex){} スライド完了時に呼び出される関数

 

fullpage.jsを使っているサイト

 

簡単に実装できるfullpage.jsですが、有名な会社やキャンペーンページなどでも多く見かけます。
私が見てきた中でfullpage.jsを使っているサイトをいくつか紹介しますね。アイディアやコーディングの参考になります。

 

 

国内ではMoneytreeのサイトが有名でしょうか。オーソドックスな使い方をしているので、とても参考にしやすいですね。

 

個人的には、Salta BOOMBOXのサイトがお気に入りです。デザインのぼかしも合わせて、遠近感を演出していて、fullpage.jsのイベントハンドラで画像の動きを入れているので臨場感があって素敵です。

 

最後に

 

fullpage.jsのイベントを使えば、通常のフルスクロールアニメーションだけでなく、もっと緻密なサイトデザインも作れそうです。

 

コンテンツの高さをフルに使って、スクロールJavascriptを実装するのはなかなか骨が折れると思うので、fullpage.jsのようにサクッと実装できるとWebデザインの幅もぐっと広がりますね。
是非試してみてください！

 

  • midomayu

    「4.HTMLにID/クラス名を記述」の

    ⇒
    ですね。

    2年までの記事ですが一応ご報告まで。
    参考になりました。

    • neromiu

      コメントありがとうございます。
      めっちゃ間違ってますね・・お恥ずかしい・・
      ご指摘ありがとうございます。
      少しでもお役に立てましたら嬉しいです！