gridscrolling.js

JavaScript

グリッドごとに画面を縦横スクロールできるjQueryプラグイン「gridscrolling.js」

gridscrolling.jsというjQueryプラグインを使えば、縦横に配置されたグリッドごとに画面をスクロールすることができます。HTML5のsectionやasideを使うことで、縦や横にコンテンツが配置されていきます。応用次第で活用できる場面が増えそうですね。

[ads_center]

gridscrolling.js

gridscrolling.js

gridscrolling.js

グリッドマップも表示されるので、現在自分がどこの位置にいるのか把握しやすいですね。他にも上下左右に隣り合っているコンテンツがあれば矢印ナビゲーションも表示できます。

section要素でマークアップされたコンテンツは縦に並んでいき、aside要素は横に並んでいきます。

縦横スクロールすることで画面が切り替わっていきます。1画面はグリッドレイアウトの1部として扱われます。また、矢印キーでも画面を切り替えることが可能です。

1ページ全体をグリッド構造で構築したい時に役立ちますね。

CSS Gradient AnimatorCSSでグラデーション背景を変化させるコード作成ジェネレーター「CSS Gradient Animator」前のページ

iTunesのスライダーみたいなギャラリーを実装できるjQueryプラグイン「jQuery Coverflow」次のページ

関連記事

  1. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  2. Circular Slider
  3. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  4. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  5. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP