jQueryプラグイン fullPage.js フルページスクロールするサイトを簡単につくる

今回は、jQuery プラグインの「fullPage.js」について書きます。

「fullPage.js」を使うと、フルページスクロールするサイトを簡単に作れます。
簡単に言うと、iPhone5sのプロダクトサイトみたいなものが作れます。（スクロールのみ）

縦スクロールだけでなく、横スクロールも作れます。

タブレットなどにも対応しています。

あと、比較的、導入も簡単です。

まず、導入方法から書いていきます。

①
こちらの公式サイトから「fullPage.js」をダウンロードします↓
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/

githubはコチラ

ダウンロードしたフォルダを解凍すると、中身はこんな感じです。
f:id:gupuru:20140331223914p:plain

使うのは、「jquery.fullPage.css」、「jquery.easings.min.js」、「jquery.fullPage.min.js」の３つです。
「jquery.easings.min.js」は、「vendors」というフォルダにあります。

②
必要なファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.easings.min.js"></script>
<script src="jquery.fullPage.min.js"></script>

「jquery」を忘れないように（笑）

③
<body>〜</body>の間に、こんな感じで書いていきます↓

<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>

④
最後に、script部分に、これを書きます↓

$(document).ready(function() {
    $.fn.fullpage();
});

これで、完了です。

サンプルプログラムを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQueryプラグイン</title>
	<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="jquery.easings.min.js"></script>
	<script src="jquery.fullPage.min.js"></script>
	<script>
$(document).ready(function() {
    $.fn.fullpage();
});
</script>
</head>
<body>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</body>
</html>

実行結果
f:id:gupuru:20140331224826p:plain

スクロールすると1ページ分が自動でスクロールしているはずです。分かりにくいですが（笑）

上のやつは、縦スクロールです。横スクロールは、このようにします↓

<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

では、ここからはオプションについて書きます。
fullPage.jsには、たくさんのオプションがあります。

ここでは、一部を紹介します。詳しくは、知りたい方は、Githubの方を見てください。

背景色

背景色の変更は、このようにします。

$(document).ready(function() {
    $.fn.fullpage({
    	slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke']   
    });
});

「slidesColor」が背景色の変更です。１６進数などで変更できます。
順番は、「slidesColor: ['１番目', '２番目'] 」こんな感じです。

スクロール速度

スクロール速度の変更は「scrollingSpeed」を使います。

$(document).ready(function() {
    $.fn.fullpage({
    	scrollingSpeed: 400
    });
});

以上で紹介を終わります。
まだまだあります。詳しくは、Githubで確認して下さい。

最後に、オプションを使ったプログラムを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQueryプラグイン</title>
	<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="jquery.easings.min.js"></script>
	<script src="jquery.fullPage.min.js"></script>
	<script>
$(document).ready(function() {
    $.fn.fullpage({
    	slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke'],
    	anchors: ['firstPage', 'secondPage', '3rdPage', 'lastPage'],
    	scrollingSpeed: 400
    });
});
</script>
</head>
<body>
	<div class="section">
		<h1>最初の画面</h1>
	</div>
	<div class="section">
		    <div class="slide"> 
		    	<h1>横の１枚目</h1>
		    </div>
		    <div class="slide"> 
		    	<h1>横の2枚目</h1> 
		    </div>
		    <div class="slide">
		     	<h1>横の3枚目</h1>
		    </div>
		    <div class="slide"> 
		    	<h1>横の4枚目</h1> 
		    </div>
	</div>
	<div class="section">
		<h2>３枚目の画面</h2>
	</div>
	<div class="section">
		<p>４枚目の画面</p>
		<p>４枚目の画面</p>
		<h2>４枚目の画面</h2>
	</div>
</body>
</html>