jquery.square.js

JavaScript

スクエアなグリッドレイアウトを実装できる「jquery.square.js」

jquery.square.jsは、スクエアなグリッドレイアウトを実装することができるjQueryプラグインです。レスポンシブに対応し、いろんなデバイスから最適なレイアウトで閲覧できます。シンプルで美しいグリッドレイアウトを実装したい人は要チェックです。

jquery.square.js

デモ

デモページでは、スクエアなアイテムがグリッドレイアウトで綺麗に並べられています。レスポンシブにも対応していることから、ブラウザ幅を縮小・拡大していくとそれに合わせて最適化されます。

アイテムはほとんどが同じサイズのものが多いですが、いくつか異なるサイズのアイテムも表示されています。異なるサイズでも綺麗なグリッドレイアウトになるように配置されています。

ブログのトップページや企業の新着情報など、応用次第で使いどころはいろいろありそうですね。

<div class="square">
    <div class="inner">
        <h2>サンプルテキスト</h2>
        <p>サンプルテキスト</p>
    </div>
</div>
  • target
  • inner
  • scaleSplit
  • width
  • height
  • space
  • speed
  • duration

デフォルト値は、targetが”square”、innerが”.inner”、scaleSplitが”_”、widthが150、heightが150、spaceが10、speedが700、durationが500です。

jquery.square.js

simpler-sidebarシンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」前のページ

入力された結果を検索表示するjQueryプラグイン・PHP検索フォーム「AJAX Live Search」次のページAJAX Live Search

関連記事

  1. JavaScript

    レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

    slickというjQueryプラグインを使えば、レスポンシブでカスタマ…

  2. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  3. Multi-Screen.js
  4. bcralnit.js
  5. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  6. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP