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ページ全体をグリッド構造で構築したい時に役立ちますね。

関連記事

  1. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  2. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  3. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  4. jQuery Pretty Dropdowns
  5. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  6. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景

アーカイブ

PAGE TOP