10 Best jQuery Flip effect plugin with examples jQueryでフリップエフェクトを使った良プラグインやサンプル集１０。 送信時にフリップするフォームやフリップするカウンタの他、アイテムをフリップアニメーションさせてオシャレにレイアウトするプラグインやサンプルがまとまっています。 こういうことも出来るんだということを認知する意味で一度見ておくとよさそう 数年前ではこういうのはFlash以外に考えられませんでしたが進化を感じられますね 関連エントリ jQueryでフリップするカッコいいメニュー作成のチュートリアル 多数のパネルをアニメーションでフリップさせるクールなUI実装サンプル

jQuery Zoom マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」。 画像にマウスホバーするとマウス位置部分が拡大されて表示されます。クリックをトリガにすることも可能。 操作自体はとてもシンプルですが、ホバーだけで拡大したい位置を拡大できるというのは意外と便利そうです。 LightBoxのような形式であってもポップアップでズームというと閉じないといけませんし、これぐらいのシンプルさはショッピングサイトなどでの利用頻度が高い場合においては使い勝手がよさそう。 角っこにズームアイコンが付けられたりするのもオシャレですね 関連エントリ ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」

Animated Responsive Image Grid | Codrops 画像が個別にアニメーションしながら切り替わるイメージグリッド実装デモ 次のように画像が並んでおり、ランダムに数個が別の画像にアニメーションしながら切り替わる感じがオシャレです。 会社概要ページとかでメンバーを並べる、というような用途に使うと面白いかも。 サンプルダウンロードで利用することも可能。 関連エントリ 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」

Crisp Icon Set - Icon Deposit アプリに使えそうな108のベクターアイコンセット「Crisp Icon Set」。 アプリに使えそうなものが揃っているではありませんか。 ベクターなので使いやすそうですね 関連エントリ iOSのAppアイコン作成用PSDテンプレート ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」 RetinaディスプレイOKなアプリ用PSDアイコン350 アップル製アイコン風の汎用フリーアイコン９９個セット「Freshy」

Meny - CSS 3D fold-in menu concept 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」。 ページのサイドに矢印があって、クリックするとコンテンツがグリっと3Dで回転して超カッコいいメニューの実装例です。 SafariやiPhone等で確認することが出来ます メニューを開いた例。 ページの右側を切り替えても動くように出来ます。 これは、まだまだ進化しますね 関連エントリ シンプルだけどデザインがよいドロップダウンメニュー実装チュートリアル デザインも動きもオシャレなjQuery＆CSS3メニューデモ スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 メニューを固定したWEBデザインのサンプル２１

ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ

gridster.js アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」。 ブロック要素を好きな位置にドラッグ＆ドロップで移動できるだけではなく、アニメーションしながら気持よく動かせます サイトのメニュー等に実装すると好きな位置によく使うものをおけて便利、という感じに使えそう 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ PinterestのPinIt機能実装jQueryプラグイン ドラッグ＆ドロップでアイテムを移動できる階層ツリー実装jQueryプラグイン「Nestable」

12 Free jQuery Pre-Loader Plugins CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２がまとまっています。 画像の種類が色々ある上に実装方法も、単なる画像ではない方法が選べます。 画像じゃない方法でローディング画像を実装したい場合は参考にするとよさそう。 画像ではないため、軽量でレスポンシブなサイトにも使えるというところですかね 関連エントリ 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」

Home - Recline Data Explorer and Library 色んなデータを便利に表示できる「Recline.js」 データをExcel表風にしたり、グラフを描画したり、タイムラインにしてみたり、データを地図上にプロットしてみたりといったことが出来るライブラリだそう。 テーブルビュー。ソートなんかもできてこれだけでもリッチです このデータからグラフにしたいモノを選んでグラフ化も可能 データを元にタイムライン表示もできるみたい データを元に、地図上にプロットするなんていうこともできます なかなか面白いですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」

CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー