ブラウザいっぱいにコンテンツを表示できる、シングルページ用の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>
オプション
設定のサンプルはデモページをご確認ください。
ナビゲーション
| 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構造を更新。 |
【参考サイト】
コメントが承認されるまで時間がかかります。