CSSのみで約900パターンものユニークなグリッドレイアウトをドラッグ&ドロップで作成出来るWebサービス・3x4grid - かちびと. net

2012/01/09 329 users グリッドレイアウト CSSジェネレーター CSS パズル 休日

3連休を如何お過ごしでしょうか。さて、 ちょっと面白いものを見かけたのでシェア します。Masonryのようなレンガ風の レイアウトをCSSのみでサクッと作れる Webサービス。パズルのように組み合わせ るので種類は900パターン近くになる そうですよ。 休日なので軽めの話題でも。 よくあるグリッドレイアウトのCSSジェネレーターと違って汎用性はありませんが、こういうサービスが出てきたのがちょっと... 続きを読む

[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious | コリス

2012/10/18 141 users コリス jQuery スクリプト アニメーション プラグイン

Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Licious... 続きを読む

[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js | コリス

2013/06/17 86 users コリス jQuery Isot スクリプト 間隔

画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト（Masonry, Isot... 続きを読む

要素をレンガ風に配列するスクリプト・jQuery Masonryで、配列させる要素を下揃えにする - かちびと. net

2012/02/24 81 users レンガ風 net 要素 jQuery 時系列

要素をレンガ風に配列するjQueryプラグイン のMasonryで、要素を下揃えに配置出来るよ うにしたい、という内容です。オプション 項目を追加してオンオフを出来るようにカス タマイズします。下揃えにする機会があるか どうかは置いといてｗ jQuery Masonryというのは要素を時系列を崩さずに配列させる事が可能なjQueryのプラグインです。以前少し記事書いたので合わせてご覧下さい。 ボッ... 続きを読む

[JS]jQueryのMasonry風レイアウトをスタイルシートで簡単に調整できるスクリプト -Salvattore | コリス

2013/09/02 72 users jQuery コリス スクリプト スタイルシート 間隔

高さの異なるパネルをレンガ状に一定の間隔で配置するjQueryのプラグイン「Masonry」風レイアウトを簡単に実装できるように、スタイルシートで調整できるスクリプトを紹介します。 スタイルシートベースなので、レスポンシブ対応もMedeia Queriesを利用できます。 Salvattore Salvattore -GitHub Salvattoreのデモ Salvattoreの使い方 Salv... 続きを読む

グリッドに配置された画像にマウスオーバーした際に十字ハイライトさせるjQueryプラグイン - かちびと.net

2011/06/23 51 users グリッド 十字 jQueryプラグイン マウス パクト

個人的に好きなタイプのjQueryの使い方 だったのでメモ。イメージギャラリーは、こ ういったエフェクトも大事な要因ですし、 参考にしておきたい所です。なかなかイン パクトもあって素敵ですね。尚、グリッドは Masonryを使っています。 基本的にはユーザーの利便性を高める目的でjsを使いたいですけど、視覚的にインパクトを与えられるのも利点の一つかなとは思います。 Animating with M... 続きを読む