envision - demos インタラクティブで高性能なグラフを描画できる「envision」 リアルタイムに描画したり、範囲を指定して拡大したり、といったグラフを実装できるようです。 リアルタイムに描画されるデモはなかなかカッコいい上に実用的です。 関連エントリ クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 レスポンシブな円グラフが描画できる「Pizza Pie Charts」 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」

PNotify Bootstrapなサイトでの通知に使えるレスポンシブなjQueryプラグイン「PNotify」 クロスブラウザでテーマの適応が可能だったりするライブラリだそう Bootstrap3に対応していてレスポンシブに使えるのもいいです。 関連エントリ ページ内にどんどん通知アラートを設定できるjQueryプラグイン「Messenger」 通知件数を取得してfaviconやtitleで通知件数を表示できる「jQuery Notify Better」

jQuery Tilted Page Scroll by Pete R. | The Pete Design スクロールに連動して画像が立体的に現れるようにできるjQueryプラグイン「Tilted Page Scroll」 カバーフローのようなおしゃれ感がでて、単に画像を並べるよりもカッコよくなるかも。 スクロールに連動したアニメーションを入れるだけでこうも変わるものだな、という１例でした。 関連エントリ レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 線を描きながらギャラリーの画像を選択できるようにするjQueryプラグイン

クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive Image Maps」 2014年03月20日- esponsive Image Maps jQuery Plugin クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive Image Maps」 クリッカブルマップ、といえばHTML入門時には面白そうと思ったわりに設定が面倒なのであまり使わなくなったという方もいるかもしれませんが、あのクリッカブルマップをレスポンシブにするjQueryプラグインだそうです。 リサイズ時にクリッカブルマップのデータを再計算してマッピングしてくれるようです。 タッチ型デバイスでは意外と使えそうなこの機能。 この際に再度利用法を検討してみるのもよいかも。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「Veno

jQuery ListNav Plugin Demo 高速で使いやすいリストのインデックスナビゲーションが作れるjQueryプラグイン「ListNav」。 まず、索引があって、索引のAとかにカーソルを合わせると存在するアイテムの件数を表示してくれてクリックすると表示するっていうもの。 アイテムをULリストで全部定義しておいて、jQueryで一気に初期化しちゃえます。 JSで制御しているので一度読み込んでしまえば超高速。 アルファベットにしか対応していないので用途は限られるものの、かなりいい感じのナビが作れますね。 カスタマイズして日本語に対応してもよいかも。 関連エントリ スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 ドットによるナビゲーションのクールなサンプル集 スクロールにより積み重なるナビゲーションヘッダーを作れる「Slinky.js」

DarkTooltip. A simple customizable tooltip with confirm option and effects 黒ベースでクールにアニメーションするツールチップ実装jQueryプラグイン「DarkTooltip」 ツールチップ、でいうと意外と普通のデザインですが、表示時のフリップするアニメーションがなんともクールなツールチップです。 デモページ 関連エントリ レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 ツールチップなどを表示した際に画面からはみ出さないようにしてくれる「offscreen.js」 フラットでシンプルさがいい感じのツールチップライブラリ「Simptip」

gifplayer. Customizable jquery plugin to play and stop animated gifs. Similar to 9gag's GIFアニメーションに再生ボタンを付けてYoutubeっぽく再生できる「gifplayer」 GIFアニメというと読み込んだ時点でアニメーションがはじまってしまうイメージですが、こちらのプラグインを使って再生制御が可能となります。 まず、srcに静止時のGIFを用意しておいて、クリック時にGIFアニメに切り替えるというシンプルな方法で実現しています。 GIFアニメの１枚目をサーバサイドで取り出せるようにすればほぼ自動化が可能ですね。 関連エントリ PHPで透過GIFアニメをリサイズできるクラスライブラリ

Flickerplate Plugin フリックでページ切り替えができるようにするjQueryプラグイン「Flickerplate」 マガジンをめくるように横フリックで画面が変わるようなWEBサイトを簡単に作れるプラグインです。 必要なライブラリを読み込んだら、ulでページをリスト定義して、$(element).flicker() で初期化するだけで簡単にマガジン風ページができあがります 関連エントリ タップ操作とクリックのイベントを統一できるjQueryプラグイン「jQuery Finger」 ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン「Hook.js」 スマホ、PCで使えるサイドバー実装ライブラリ「Slidebars」 スマホアプリの操作ムービーに使えるジェスチャー素材「Precomposed Touch Gestures」 レスポンシブなカバー

Bootstrap Zero - Free Bootstrap Templates and Themes フリーのBootstrapテーマが満載「Bootstrap Zero」。 フリーで使えるテンプレートが沢山ありますので、叩き台として活用できそうです。 Facebookっぽいテンプレも。 関連エントリ Bootstrap用、横スライド式メニュー等の追加コンポーネントが使える「Jasny Bootstrap」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 Bootstrapなalert,confirm,promptが実装できる「Bootbox.js」 Bootstrap3のUIをベクター形式でダウンロードできる「Bootstrap 3 UI Kit」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summer

accounting.js - format money / currency in JavaScript 通貨フォーマット変換ができてサイトの国際化に使える「accounting.js」 通貨におけるシンボル。例えば、円だったら￥でドルだったら＄などありますが、国に応じた通貨のフォーマットを正しく表示する際に使えるというものです。 あくまで表示フォーマットであって、価値の相互変換には対応していないようですが、カンマがドットになったりする国もありますので、こうしたライブラリに表記法を任せちゃえば便利ですね。 関連エントリ タッチに最適化されたLightBox実装jQueryプラグイン レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 レスポ

Data Img - Two Blokes 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 単に横方向に拡大・縮小するだけのレスポンシブ対応ならCSSで出来ますが（Bootstrapのimg-responsiveみたく）、 幅に応じて複数の画像を切り替えたいような場合に、使えます。単なる縮小だと文字が小さくなりすぎて読めないなんて場合に別の画像を使うことも考えられますが、そういったケースに使えるプラグインとなります マークアップ的には次のように複数の画像を指定してプラグイン初期化する感じの使い方みたいです 関連エントリ レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブかつフラットなソーシャルボタン

Bucky ? Performance Measurement of Your App's Actual Users サイトのパフォーマンスをリアルタイムにモニタリングできる「Bucky」。 ページのローディングやAjaxリクエストの速度など、ページのパフォーマンスをリアルタイム描画できるツールです。 自分以外の訪問者が大体どれぐらいで読み込んでいるのか？Analyticsの統計などで見ることもできますが、こちらはリアルタイムに表示されるのがいいですね。 node.jsベースのツールっぽいです 関連エントリ Node.jsとMongoDBを使ったHTTP監視ツール「Uptime」

Remodal クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブ対応のモーダル表示ライブラリもちらほら出てきていますが、こちらは、モバイル表示時にモーダルっぽさをなくした全面表示というのがカッコよく新しいライブラリです。 PC版はこれまで同様のモーダル表示。表示がフラットで若干モダン スマホの場合は全画面表示。なんかこの方がカッコいい気がします。 別にフローティングなエフェクトは画面の無駄ですし必要ないという所が合理的で表示もクール。 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 何でも埋め込めてカッコいいモーダ

FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome Animation」 2014年03月06日- Font Awesome Animation FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome Animation」。 FontAwsome自体は単なるアイコンフォントですが、これにCSS3アニメーション（自動アニメーション、ホバー時）機能を付けたもの。 FontAwsome自体のマークアップが<i class="fa fa-envelope"></i>であれば、classにfaa-horizontal animated 等として追加すれば、指定したアニメーションで再生されます。 FontAwsomeだけじゃなくて、BootstrapのGlyph等でも同様に使えそうですね。 実装コード例。JS不要で

FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome An... 次の記事 ≫：クールに実装できるレスポンシブなモーダルダイアログ「Remodal」

jQuery Tip Cards by Pete R. | The Pete Design Google Tipsのようなヒントカードを並べて拡大できるUIを実装できる「jQuery Tip Cards」 次のようにカードがならんでいて、フォーカスで傾いてクリックでLightBox風に拡大されるというUIが実装できます 関連エントリ html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 クールなニュースティッカーを実装できるjQueryプラグイン「Advanced News Ticker」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuous-calendar」 サイト内にパノラマ画像をモダンな感じ

DateTime Picker 変わったUIの日付＆時刻ピッカー実装jQueryプラグイン「DateTime Picker」 通常日付ピッカーというとカレンダーを想像しますが、こちらは＋、−のボタンが付いており、て入力も可能という、ちょっと変わったUI。 オシャレ感はあるので、ありきたりは嫌だという場合に使えるかも 関連エントリ Googleカレンダーっぽい物や日付ピッカー等カレンダー関連のjQueryプラグイン集15 レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」

Ridiculously Responsive Social Sharing Buttons by KNI Labs レスポンシブかつフラットなソーシャルボタンを実装できる「rrssb」。 次のように、フラットでカッコいいレスポンシブなソーシャルボタンが実装できます。 ある程度目立つというのは重要で、その要件を満たしつつフラットなデザインのため汎用に使えるという点がよさげ 関連エントリ Twitter、FB等シェアボタンによる情報送信を防げるjQueryプラグイン「Social Share Privacy」

MEROO ICONS-110 FREE PSD ICONS on Behance フラット感が美しい個性的な１１０のアイコンセット「MEROO ICONS」 次のような美しいアイコンセットがPSD形式でダウンロードできます。 ちょっと汎用的じゃない感じもありますが、使えそうなアイコンも多数あります 関連エントリ 汎用のフラットアイコン４４種 汎用で使える264種のフラットなベクターアイコンセット「IKONS」 海をテーマとしたフラットなベクターアイコン120 ハイクオリティなソーシャル向けのフラットアイコンセット フリーな1262種類のフラットアイコン「COSMO MINI」

150 Outline Vector Icons Pack - Freebies Gallery フラットでベクターな汎用アイコン１５０個セット。 次のようなフラットであるけれど個性的な汎用アイコンセットが公開されています 形式はPNGとEPS 関連エントリ 汎用のフラットアイコン４４種 汎用で使える264種のフラットなベクターアイコンセット「IKONS」 海をテーマとしたフラットなベクターアイコン120 ハイクオリティなソーシャル向けのフラットアイコンセット フリーな1262種類のフラットアイコン「COSMO MINI」 美しいフラットなアイコンフォント「Dripicons」 PSDとAI形式のフラットな４２個のお天気アイコン 200個のフラットなフードアイコンセット