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

2014.10.20   930


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

 

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

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

gridscrolling.jsのデモ


gridscrolling.jsのページ


gridscrolling.jsの使い方

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

HTMLコード

gridscrolling.jsのデモページ

画面を縦に横にスクロースしてみて


CSSコード



JavaScriptコード




チェックポイント

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

プラグインへ一言

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

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

follow us in feedly

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