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. ToProgress

    JavaScript

    画面上部に軽量なプログレスバーを実装できる「ToProgress」

    ToProgressは画面上部にシンプルで軽量なプログレスバーを実装で…

  2. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  3. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  4. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  5. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

  6. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP