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

メインコンテンツとなる垂直に配置されたsection要素に、それぞれのサブコンテンツとなるaside要素を水平に自動配置するjQueryのプラグインを紹介します。

垂直・水平スクロールを使ったウェブページだけでなく、プレゼン用のスライドなどにも利用できそうですね。

サイトのキャプチャ

gridscrolling.js
gridscrolling.js -GitHub

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; }

sponsors

top of page

©2018 coliss