gridscrolling_jsプラグインのデモページ

【jQuery】画面全体を1グリッドと捉える?gridscrolling.jsが面白い

2014.10.20   773


いまやBootstrapを始めとしたWebサイトのグリッドシステムはだいぶ定着してきました。
何と言っても楽ですからね。
今日紹介するのはそんなグリッドシステムの1グリッドを1つの画面として捉えるフレームワークプラグインのgridscrolling.jsです。
是非デモを見てみてください。

 

gridscrolling.jsのオススメ/ポイント

  •   1画面を一つのグリッドとして捉えるという新しさ
  •   自分がサイトのどこにいるかがすぐ分かるグリッドマップ
  •   使い方次第で幅が広がりそう

gridscrolling.jsのデモ


gridscrolling.jsのページ


gridscrolling.jsの使い方

それではgridscrolling.jsの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<header>
    <hgroup><h1>gridscrolling.jsのデモページ</h1></hgroup>
    <p>画面を縦に横にスクロースしてみて</p>
</header>
<section>
    <!-- 縦方向に追加する画面 -->
</section>
<section>
    <!-- 縦方向に追加する画面 -->
</section>
<aside>
    <!-- 横方向に追加する画面 -->
</aside>
<aside>
    <!-- 横方向に追加する画面 -->
</aside>
<section>
    <!-- 縦方向に追加する画面 -->
</section>

CSSコード

<link rel="stylesheet" href="gridscrolling.css">
<style>
#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; }
</style>

JavaScriptコード

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="gridscrolling.js"></script>
<script>
$(function() {
    $('body').gridscrolling("init", {
        animationSpeed: 400,
        showMarker: true,
        showOverviewMap: true
    });
});
</script>

チェックポイント

HTMLはsectionで囲めば縦方向に画面が追加され、asideで囲めば横方向に画面が追加されるイメージ。 いろいろ試してみると面白いと思います。
デモでは横3列の内に穴が空いている画面もありますが、それを全てasideで埋めてみても良いかもしれませんね。

プラグインへ一言

Yes,Noクイズとかも良いかもね。

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております