Blueprint: Multi-Level Menu | Codrops モバイル対応でクールにアニメーションする複数階層メニュー実装デモ なかなかクールなアニメーションでレスポンシブに対応したメニュー実装のデモです。 アプリっぽく動作してなかなか実用的です 関連エントリ 製品の比較を行える次世代のUI実装 input[type=file]をいい感じにスタイリングするチュートリアル ドラッグ＆ドロップにまつまるUIデザインのアイデア集 今風なグリッドxアニメーションするレイアウト実装デモ「Grid Item Animation Layout」

Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル

Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッとまとめて表示したい場合に便利そうです 次のようにJSONでURLを定義してあげればまとめて表示してくれるみたい 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 おしゃれで軽量なシェアボタンを実装できるjQueryプラグイン Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 フラットデザインがクールなカレンダー実装jQueryプラグイン「kalendar」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグ

jQuery Lightbox alternative: Touch Optimized Sliders "R"Us タッチに最適化されたLightBox実装jQueryプラグイン。 スワイプで画像が横にずれ、画像をクリックで拡大されるようなUIが作れます。 タッチデバイス向けのギャラリーをサクッと実装したい場合に使えそうです 関連エントリ スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」 HTML5＆CSS3なレスポンシブなスライダー実装jQueryプラグイン「Slippry」 3Dでグルグル回転するインパクト大なスライダー実装jQueryプラグイン「Impulse Slider」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 クロス環境で動作するレスポンシブスライダー実装

Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav

jQuery One Page Scroll by Pete R. | The Pete Design iPhone 5sサイト風の１ページスクロールなページを作れるjQueryプラグイン「One Page Scroll」。 流行りの１ページスクロールサイトが作れるプラグインです。iPhone 5sのサイト divを並べて初期化するだけなのでだれでも簡単に使えそう 関連エントリ ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 アニメ

要素をPhotoshopの「ぼかし」バリにぼかすことができるjQueryプラグイン「Vague.js」 2013年06月27日- Vague.js 要素をPhotoshopの「ぼかし」バリにぼかすことができるjQueryプラグイン「Vague.js」。 次のように通常の要素をSVGフィルタを使ってぼんやり、ぼかすことが出来ます。対応するブラウザは限られますが、ブラウザだけで出来るというのがいいですね パラメータでぼかし強度を選べたりもします。 実装サンプルコードです。 近い将来、画像編集ソフトで今やってるようなことは殆どブラウザ上で、スクリプトで動的に実現出来るようになるんでしょうね。 関連エントリ Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」 jQueryでフリップエフェクトを使った良プラグインやサンプル集１０ エフェクトが色々選べるイメー

| HTML5 Canvas Rich UI JavaScript Library 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 グリッド、ツリービュー、タブ、フォーム等のリッチコンポーネントが詰まっていてスマホも対応しているUIライブラリ UIに若干クセがありますが、テーマ機能もあるので、今後に期待したいライブラリです 関連エントリ jQuery用のよく使うUIコンポーネントセット「ZinoUI」 BootstrapをベースとしたフリーのUIKit「Flat UI」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン「Hook.js」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 これは超使いやすい

Plugin pp3Diso : moteur de jeu web pour l'affichage et la gestion d'une map 3D isomtrique Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」。 マップ上を人が移動するような感じのゲーム風インタフェースが作れるライブラリっぽいです。 フランス語っぽいので翻訳したりコードを読んだりして使う必要がありますが、なかなかおもしろいのでご紹介。 JavaScriptベースということで、スマホで動くAmebaピグを作ってやろう、という方は参考にできるかも。 関連エントリ ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」 カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」 Instagramの写真をサイトに簡単掲載できるjQ

レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 2012年07月10日- PHPImageWorkshop - PHP class using the GD library for image processing レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」。 画像生成のサービス等を作る際には押さえておきたいライブラリかも。WEBサービスにおいては画像生成はよく使われるものですから、覚えておいて損はないでしょう。 以下に行える処理の概要をご説明します。 画像合成 複数の画像を組み合わせて簡単に合成する機能。透過pngの画像を合成します。 合成結果。透過PNGによって綺麗に合成されていますね。 実装コードが分かりやすくて、次のように addLayer

WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう

Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけなので、面倒な事は何一つ考えないでいいです 若干動きが良くない部分もあるみたいですが、今後に期待したいですね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 スマホサイト作成のフレームワーク「iUI」が新しくなっている件 PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 ス

画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 2012年03月19日- jQuery File Upload Demo 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 Twitter Bootstrap を使ったアップロードのデモなんですが、ファイルを選択するとサムネイルが直ぐに出てくれてます。（複数選択が可能） そして、選択後、すぐアップロードは開始されず、Startボタンを押すと開始されます。 なんか選択したらすぐアップされたなんていうケースがありますのでこれは安心です。 更に、個別にキャンセルが可能なので、アップしようと思った画像と違う物を間違ってアップする事をサムネイルで未然に防げます。 アップした後も、Del

faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 2012年02月29日- jquery favicon faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」。 faviconをダイレクトに書き換えることができ、既存のアイコンに文字をプラスして表示させることもできます 例えば、次のようなコードを書いたとしましょう すると次のようにアイコンが描画されます。 テキスト色で指定したカラーで XX という文字が描画されているのが分かります 更にアニメーションさせることも可能です。 細かい所ですが、より利用者の方に気づいてもらえるように、とこだわりたい場合に使えますね 関連エントリ ユーザへの通知UI全部のせなjQueryプラグイン「noty」 通知件数表示付きのメニュー実装j

30 Useful jQuery Filter and Sort Plugins - tripwire magazine 多数のアイテムから目的の物を見つけやすくするjQueryフィルタリングプラグイン集 沢山のアイテムをずらっと並べただけだと探しにくいわけですが、フィルタリングをすることで目的の物をすぐに見つけられます。 画面遷移もないというのがいいんですが、そういった機能を実装するためのプラグインが３０個もまとまっていて、自分にマッチしたものを探せそうです よくこんなにあったもんだなという感じですが、便利に活用させていただきましょう 関連エントリ レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 ユーザへの通知UI全部のせなjQueryプラグイン「noty」 レスポンシブなスライドショーを実装できるjQueryプラグイン「Responsiv

Auto PHP Codeigniter CRUD | grocery CRUD | Grocery CRUD, a Codeigniter CRUD CodeIgniter開発での管理画面作成を楽にする「grocery CRUD」 WEBアプリを作る場合は管理画面を作ることが多いですが、データベースをCRUDする機能が一番よく使うものですね デザインがかっこよくてリッチな必要十分な機能を備えたCRUDインタフェースを提供してくれるようです。 モダンなインタフェースを簡単に構築できるようです phpMyAdminなんかを使う人も居そうですが、なんでも出来て危なすぎるので、CIを使ってる人はこうしたものを使ってみるのもよさそうですね 関連エントリ カッコイイWEB管理画面を作成するPhotoshopチュートリアル WEB管理画面のテンプレート２２ 管理画面やダッシュボードのハイクオリティなテ

textualizer 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 様々なアニメーションエフェクトがあり、文字に動きをつけて注目を集めたい場合なんかに使えそうです。 IE6を含むレガシーなブラウザにも対応しています。 次のような簡単な分かりやすいソースコードで実装できます。 キャンペーンサイトなど、インパクト重視のサイトに入れてみるとよさそうですね 関連エントリ 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」

Amazing Photoshop Styles | InspireFirst 映画のロゴみたいな超カッコイイロゴが一瞬で作れるPhotoshopスタイル集 あの映画で見たようなデラックスなロゴをクリック一回で作れちゃいます 有償ですがそんなに高くないので手間を考えると入れちゃってもよさそう。どれぐらい使うかにもよりますが・・・ 関連エントリ Photoshopのクリエイティブで効率化ができるレイヤースタイル２０ iOSスタイルの壁紙を作成するPhotoshopチュートリアル ストライプ等、Photoshop用の４００個のパターンまとめ

使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 2011年11月02日- nicescroll : stylish scrollbars ios look-alike | jQuery Plugins 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 OSによってスクロールバーデザインが違ったり、常に表示されていたりというのが当たり前でしたが、独自スクロールバーにするのが最近のトレンドっぽいですね。 今回紹介するプラグインを使えばiPhoneのあのスマートなスクロールバーをPCブラウザでも実現出来ます。 エレメントにカーソルを合わせると次のような独自実装のスクロールバーが現れます スクロールすると当然、スクロールバーの位置も変化 時間を置くと勝手にスクロールバーがフェードアウトで消えます。

EasyType Dev 電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」。 このプラグインを使うと予め指定したフォーマットで特定のインプットフィールドを初期化すると、指定の文字しか入れられないようにしつつ、背景に入力ヒントを表示させられます。 初期化を次のようにします $('#phone_number').easytype('(###) ###-####'); 入力には ###-###-#### という形式の数字しか入れられなくなります。 フィールドを分けるのも面倒ですし、かといって単なるinputをおくだけだとちょっと不親切かもしれないですね。 ifとかelseも使えるので、携帯番号でも、固定電話でも使うことはできそうです。 電話番号以外にも 2011/10/01 のような日付を入れるのにも使えます。 ソフトウェアのシリアル番号っぽい入力をしてもらうことも