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

複数のコンテンツをそれぞれブラウザの枠いっぱいに表示し、それらを水平・垂直のマトリックス状に配置し、ダイナミックなアニメーションで切り替えるjQueryのプラグインを紹介します。

サイトのキャプチャ

jQuery.fullContent
jQuery.fullContent -GitHub

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が水平です。
上記の設定は、下記のようになります。

v1h1 | v1h2 
v2h1 | v2h2

top of page

©2017 coliss