カッコよくスライドする「fullPage.js」


blog20150706

制作の佐々木です。
前回に続きシングルページ作成の際に簡単に導入できる
便利なjQueryプラグインの紹介です。
今回は「FullPage.js」というプラグインで
スクロールすると1ページ分スパっとカッコよくスライドするプラグインです。
紙芝居みたいなイメージですね。

ダウンロード

こちらの配布サイトからファイルをダウンロード

jquery.fullPage.jsjquery.fullPage.cssを読み込みます。
あとjQuery本体も

[html]
<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.fullPage.js"></script>
[/html]

HTMLとjQueryの記述

[html]
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
[/html]

配布元のコピペなんですが
HTMLは全体をid=”fullpage”で囲みページ毎にclass=”section”で組む感じです。
jQueryの記述は

[js]
$(document).ready(function() {
$(‘#fullpage’).fullpage();
});
[/js]

一番簡単でシンプルな記述が上記です。
色々オプションもあるみたいなので
カスタマイズしたデモを作ってみました。

デモはこちら

今回使用したオプションは

[js]
$(document).ready(function() {
 $(‘#fullpage’).fullpage({
   navigation: true,
   navigationPosition: ‘right’,
   menu: ‘#nav’,
   anchors:[‘section1′,’section2’, ‘section3′,’section4’],
 });
});
[/js]

navigationは画面横にある黒丸です。
menuは上部のナビゲーションから移動できるように指定しました。
anchorsでページ内リンクを指定します。
個人的にはオプションはこれくらいでも十分です。

中の文字をページが切り替わる度に動きを付けたかったので「inview.js」というプラグインも合わせてを使ってます。

inview.jsはwow.jsみたいにウィンドウに表示されたタイミングで実行されるプラグインです。
wow.jsと違うのは決まったアニメーションのクラスを付けて動かすのではなく、
表示されたときの動き、隠れた時の動きを自分で書いていきます。

[js]
$(function() {
$(‘.fade01’).css(‘margin-left’,’-150px’);
$(‘.fade01’).on(‘inview’, function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
if (visiblePartY == ‘both’) {
$(this).stop().animate({
‘opacity’ :’1′,
‘margin-left’: ‘0px’
}, 400);
}
}
else {
$(this).stop().animate({
‘opacity’: ‘0’,
‘margin-left’: ‘-150px’
}, 400);
}
});
});
[/js]

if(visiblePartY==’both’)で表示域に要素が全て入ったを意味します。
その下にanimateなどを使い書き、elseで要素が外れた時の動きも書きます。
使い方次第では好きな動きが付けられるのでありがたいプラグインだと思います。

スクロール系プラグインはどれも似たような感じに見えますが導入のしやすさやオプションの種類もプラグインごとに違うし、他のプラグインとの相性もあるので
どれが一番とかはなかなか決められず、つい色々試してみたくなってしまいますね。


PAGE TOP

CONTACT

サービスについてのご相談やご質問など、
お気軽にお問い合わせ下さい。