fullPage.jsの使用方法メモ

ブラウザいっぱいにコンテンツを表示できる、シングルページ用のjQueryプラグイン「fullPage.js」の使い方メモ。

使い方

下記からダウンロードできます。
alvarotrigo/fullPage.js · GitHub

ダウンロード後、必要なファイルを読み込みます。

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

使用するオプションによっては、下記ファイルの読み込みも必要になります。
jQuery Easing Plugin
jQuery slimScroll | rocha.la | JavaScript and my other hobbies

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

HTML

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

.sectionの部分がフルスクリーンで表示されます。

JavaScript

<script type="text/javascript">
$(function() {
	$('#contents').fullpage();
});
</script>

fullPage.jsの使用デモ1
 

オプション

設定のサンプルはデモページをご確認ください。

ナビゲーション

menu メニューの場所の指定。
初期値はfalse。
anchors ページ内リンクの設定。
初期値は[]。
navigation 垂直方向のナビゲーションの表示。
初期値はfalse。
navigationPosition 垂直方向のナビゲーションの位置指定。
初期値はnone。
navigationTooltips 垂直方向のナビゲーションのツールチップ表示。
初期値は[]。
slidesNavigation 水平方向のナビゲーションの表示。
初期値はfalse。
slidesNavPosition 水平方向のナビゲーションの位置指定。
初期値はbottom。

スクロール

css3 動作にcss3を使用するかどうか。
初期値はfalse。
scrollingSpeed スクロール速度。
初期値は700。
autoScrolling セクション毎の自動スクロール(スクロール後の画面位置調整)をさせるかどうか。
初期値はtrue。
scrollBar スクロールバーを表示するかどうか。
スクロールバーを表示しても、autoScrollingの機能は残る。
初期値はfalse。
fitToSection scrollBarをtrueにした時などに、中途半端な位置で画面を止められるようになるが、その時にコンテンツを画面に合わせて自動で位置調整するかどうか。
初期値はtrue。
easing イージング。
別途設定する場合はプラグインが必要になります。
jQuery Easing Plugin
初期値はeaseInOutCubic。
easingcss3 CSS3を使う際のイージング。
初期値はease。
loopBottom 最後のセクションでスクロールした時に先頭へ移動するかどうか。
初期値はfalse。
loopTop 最初のセクションでスクロールした時に最後へ移動するかどうか。
初期値はfalse。
loopHorizontal 水平方向のナビゲーションをループさせるかどうか。
初期値はtrue。
continuousVertical 最後のセクションで下にスクロールした時に、下から最初のセクションを出すかどうか、また最初のセクションで上にスクロールした時に、上から最後のセクションを出すかどうかを定義?
うまく効いていないようなので違うかも?
初期値はfalse。
normalScrollElements 特定の要素上で自動スクロールを切りたい場合に設定。
初期値はnull。
scrollOverflow セクションが画面高さより大きいときに、スクロールを作成するかどうか。
trueにする場合は、別途プラグインが必要になります。
jQuery slimScroll | rocha.la | JavaScript and my other hobbies
初期値はfalse。
touchSensitivity ブラウザの縦横比を定義して、スワイプ量によって次のセクションへ移動するかどうかの判別?
初期値は5。
normalScrollElementTouchThreshold 不明。
初期値は5。

アクセシビリティ

keyboardScrolling キーボードに対応するかどうか。
初期値はtrue。
animateAnchor ページアクセス時にアンカーがついていた時、移動をアニメーションにするかどうか。
初期値はtrue。
recordHistory スクロールした時にブラウザに履歴を残すかどうか。
autoScrolling: falseの時は自動的にfalseになる。
初期値はtrue。

デザイン

controlArrows スライダーの矢印を表示するかどうか。
初期値はtrue。
verticalCentered 上下中央揃えにするかどうか。
初期値はtrue。
resize ウインドウサイズ変更時に、テキストサイズを変更するかどうか。
初期値はtrue。
sectionsColor パネルの背景色。
初期値はnone。
paddingTop 上方向のパディング設定。
初期値は0。
paddingBottom 下方向のパディング設定。
初期値は0。
fixedElements 不明。
初期値はnull。
responsive 特定の横幅以下で通常のスクロール(autoScrolling: false)にする。
初期値は0。

カスタムセレクタ

sectionSelector セクションの定義。
初期値は.section。
slideSelector スライドの定義。
初期値は.slide。

コールバック

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) スライド完了時のコールバック。

メソッド

moveSectionUp() 上にスクロールする。
moveSectionDown() 下にスクロールする。
moveTo(section, slide) 指定位置にスクロールする。
moveSlideRight() 右にスライドする。
moveSlideLeft() 左にスライドする。
setAutoScrolling(boolean) autoScrollingの切り替え。
setFitToSection(boolean) fitToSectionの切り替え。
setAllowScrolling(boolean, [directions]) 指定した方向へのスクロールを制限する?
setKeyboardScrolling(boolean) keyboardScrollingの切り替え。
setRecordHistory(boolean) recordHistoryの切り替え。
setScrollingSpeed(milliseconds) scrollingSpeedを変更する。
destroy(type) プラグインで用意したイベントやHTMLタグ、CSSを破棄する。
reBuild() 現在の内容に合わせてDOM構造を更新。

fullPage.jsの使用デモ2
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31