jquery.fullPage.jsで作る横にスライドするパネル型ページ

Posted: 2014.08.14 / Category: javascript / Tag: jQuery

fullPage,js はフル画面にコンテンツを表示して結構いろいろとできるプラグインなのですが、今回は横にスライドする機能だけに絞って使ってみたいと思います。

プラグインのダウンロードと準備

ダウンロードは下記URLから。

fullPage.js One Page Scroll Site Plugin

ダインロードしたzipを解凍すると色々と入っていると思いますが、使用するのは下記です。

jquery.fullPage.css
jquery.fullPage.min.js
vendors/jquery.easings.min.js

headなどにjs&cssファイルを読み込みます。

html

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

html & css

fullPage,js では縦方向を「.section」横方向を「.slide」でマークアップします。
横方向オンリーでも一つは「.section」を作らないといけないようです。

html

<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1">
<div class="panel">
	<h2>HOME</h2>
	<p>ここにページテキストが入ります。</p>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="panel">
	<h2>ABOUT</h2>
    <p>ここにページテキストが入ります。</p>
</div>
</div>
<div class="slide" data-anchor="slide3">
<div class="panel">
	<h2>GALLERY</h2>
    <p>ここにページテキストが入ります。</p>
</div>
</div>
<div class="slide" data-anchor="slide4">
<div class="panel">
    <h2>LINK</h2>
    <p>ここにページテキストが入ります。</p>
</div>
</div>
</div>
<nav>
<li><a href="#page/slide1">HOME</a></li>
<li><a href="#page/slide2">ABOUT</a></li>
<li><a href="#page/slide3">GALLERY</a></li>
<li><a href="#page/slide4">LINK</a></li>
</nav>
</div>

ナビゲーションはポッチ（？）を自動的に生成する方法もあるのですが、ここではテキストで作成したかったので普通に作ってます。
hrefは「.slide」につけた「data-anchor」と一致させます。
最初の「page」の部分はあとあとjsで設定してます。

cssはこんな感じです。

css

.section {
background-image: url(img/bg.jpg);
background-size: cover;
}
.panel {
background-color: rgba(255,255,255,0.8);
height: 400px;
width: 740px;
padding: 40px;
margin: 0 auto;
box-shadow: 0 0 25px rgba(0,0,0,0.1);
}

次へ&戻るボタンは初期状態だとシンプルでかなりクールな感じなので変更したい場合は「jquery.fullPage.css」を直接編集すると早いです。

jquery.fullPage.css

.fp-controlArrow {
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 50px;
height: 50px;
margin-top: -25px;
background-color: #26120a;
}
.fp-controlArrow.fp-prev {
left: 15px;
background-image: url("../img/left-btn.png");
}
.fp-controlArrow.fp-next {
right: 15px;
background-image: url("../img/right-btn.png");
}

JavaScript

最後のjsは簡単です。

javascript

(function($) {
$(function() {
$('#fullpage').fullpage({
anchors: ['page'],
resize : false
});
});
})(jQuery);

「resize」をtrueにすると画面サイズに応じてコンテンツの大きさを調節してくれます。
他にも色々とオプションがありますので、下記を参考にトライしてみてください。

alvarotrigo/fullPage.js

これだけでハッシュの切り替えとかも面倒みてくれます。
かなり簡単に横型コンテンツが作成できましたね。