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

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのfocusとblurを使えばフォームが便利になる

    jQueryのfocusとblurを使えばフォームを便利にすることがで…

  2. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  3. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  4. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  5. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  6. roundSlider

    JavaScript

    値の範囲を円形スライダーで表示できる「roundSlider」

    roundSliderは値の範囲を円形スライダーで表示できるjQuer…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP