[JS]縦長ページで構造に合わせて水平コンテンツをうまくレイアウトするスクリプト -gridscrolling.js

Post on:2014年6月27日

gridscrolling.jsのデモ

デモは右上にあるマップのようにコンテンツが配置されており、垂直に並んでいるのがsection要素、水平がそのsection要素のサブにあたるaside要素になっています。
操作はキーボードの矢印キーで、普通にマウスのホイールでも操作はできます。

デモページ

このスクリプトの一番の特徴は、メインコンテンツとサブコンテンツを自動で配置することで、sectionとasideで実装するだけでグリッド状に配置します。

各パネルへは、アンカーネーム（a name="hoge")を使うことでリンクすることもできます。

スクリプトが利用できない環境でも問題ありません。
sectionはsection、asideはasideとして扱われるのでリンクも含め、ページは機能します。

gridscrolling.jsの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="css/gridscrolling.css"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="js/gridscrolling.js"></script>
</head>

Step 2: HTML

メインとなるコンテンツはsection要素で、サブコンテンツはaside要素で実装します。

<section>
  メインコンテンツ 1
</section>
<aside>
  1のサブ
</aside>
<aside>
  1のサブ
</aside>
<section>
  メインコンテンツ 2
</section>
<aside>
  2のサブ
</aside>

Step 3: JavaScript

あとは、スクリプトをセットアップすればOKです。

$(function() {
  $('body').gridscrolling("init");
});

スクリプトのオプションでは、アニメーションのスピード、マーカーやマップの表示の有無を設定できます。

$('body').gridscrolling("init", {
  animationSpeed: 400,
  showMarker: true,
  showOverviewMap: true
});

マーカーやマップのカスタマイズ

マーカーやマップのスタイルは、CSSで簡単にカスタマイズできます。

#gridscrolling-overview { border-color: #BBB; }
.gridscrolling-overview-square { background-color: #BBB; }
.gridscrolling-looking-at { background-color: #48F; }
#gridscrolling-top-marker { border-bottom-color: #357; }
#gridscrolling-bottom-marker { border-top-color: #357; }
#gridscrolling-left-marker { border-right-color: #357; }
#gridscrolling-right-marker { border-left-color: #357; }