stackgrid.adem.js

JavaScript

コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

stackgrid.adem.jsはコンテンツをグリッド状にスタッキングしていくことができます。コンテンツ間の余白やカラムのワイド幅などを指定することが可能になっているので、細かいカスタマイズをしたい場合にはとても便利ですね。

stackgrid.adem.js

デモ

デモではSmall、Medium、Largeから各サイズのコンテンツをスタックしていくことができる他、Gutter Onで余白を入れて、Gutter Offで余白を無くすことができます。

また、フレキシブルなレイアウトになっているので、ブラウザ幅を可変させることでコンテンツがアニメーションしながら再配置されます。

他にもデモメニューにあるFluidをクリックすれば横幅いっぱいに広がったレイアウトを見ることができます。

ダイナミックに切り替わっていくスタッキング可能なグリッドレイアウトを実装したい方は是非チェックしてみてください。

stackgrid.adem.js

関連記事

  1. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  2. Maximum Characters limit exceeded warning
  3. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  4. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  5. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  6. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP