[JS]ブラウザいっぱいに表示した複数のコンテンツをマトリックス状に切り替えるスクリプト -jQuery.fullContent

サイト構築 -JavaScript

Post on:2013年5月29日

jQuery.fullContentの特徴

ウインドウのサイズいっぱいのコンテンツを水平・垂直のアニメーションで切り替えます。
各コンテンツは、碁盤のように水平・垂直に配置可能。
コンテンツ間の移動はアニメーション。
ハッシュリンクでの直接アクセス対応。
ハッシュリンクでの履歴にも対応。
IE8+をサポート。

jQuery.fullContentのデモ

デモはモダンブラウザ、IE8+でご覧ください。

デモページ

デモでは最初に3つのコンテンツへのリンクがあります。
右端の「Docs」をクリックしてみます。

Docsのコンテンツがスムーズなアニメーションで表示されました。

デモページ：ドキュメント

各コンテンツは碁盤のように配置されており、ブラウザの枠いっぱいに表示されます。スクロールが必要なコンテンツにはバーが表示されます。
ハッシュリンクにも対応しており、各コンテンツへのアクセス、履歴なども有効です。

jQuery.fullContentの使い方

Step 1: HTML

まずは、全画面に表示するコンテンツを一つずつ作成します。

<div id="container">

  <div id="stage1">
  //コンテンツ：stage1
  </div>

  <div id="stage2">
  //コンテンツ：stage2
  </div>

</div>

各コンテンツはdiv要素などで実装し、idを与えます。このidはリンクに使用します。

<a href="#stage2">コンテンツ：stage2へ</a>

Step 2: CSS

スクロールバーを非表示にしたい場合は、下記を加えます。

body { overflow-x: hidden; overflow-y: hidden; }

特定のコンテンツに垂直スクロールが必要な場合は、個別に指定します。

stage1 { overflow-y: auto; }

Step 3: 外部ファイル

スクリプトを外部ファイルとして記述します。

<script src="js/jquery-1.x.x.min.js" type="text/javascript"></script> 
<script src="js/jquery.jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.jquery.fullContent.js" type="text/javascript"></script>

Step 4: JavaScript

スクリプトで各ステージの要素（div）、配置を設定します。

$('#container').fullContent({ 
  stages: 'div', 
  mapPosition: [{v: 1, h: 1}, {v: 1, h: 2}, {v: 2, h: 1}, {v: 2, h: 2}], 
  stageStart: 1, 
  speedTransition: 800, 
  idComplement: 'page_' 
});

配置は、vが垂直、hが水平です。
上記の設定は、下記のようになります。