Facebookのモーダルっぽいクールなダイアログを実現できるjQueryプラグイン「FaceBook Dialog」:phpspot開発日誌
RRPowered/FBDialog GitHub デモ：FaceBook Dialog - RRPowered Facebookのモーダルっぽいクールなダイアログを実現できるjQueryプラグイン「FaceBook Dialog」 次のようなクールなダイアログが実現できます。Bootstrapのダイアログににていますが、Bootstrapは使っていない様子 次のように簡単に呼び出せる上に、オプションが豊富で、カスタマイズもらくらく。 関連エントリ CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 フラットでカッコいいモーダルダイアログ実装デモ クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 CSS3アニメーションするモーダルダイアログ実
iPhone 5sサイト風の１ページスクロールなページを作れるjQueryプラグイン「One Page Scroll」:phpspot開発日誌
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」 アニメ
スロットっぽく文字をアニメーションさせられる「Odometer」:phpspot開発日誌
Odometer ? Transition numbers with ease スロットっぽく文字をアニメーションさせられる「Odometer」 数字や文字をスロットマシーンのようにアニメーションさせることが出来ます エフェクトとして色々と使えそうです。 関連エントリ CSSアニメーションでページを紙芝居の様に切り替えるデモ 高速なCSSアニメーションをJSで制御できる「animo.js」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 ハードウェアアクセラレーションで高速なCSS3アニメーションを実現できるjQueryプラグイン「Minimit anima」 CSS3を使った多彩なアニメーション用ライブラリ「magic」
Facebook風のチャットを自サイトに組み込めるjQueryプラグイン「ChatJS」:phpspot開発日誌
ChatJS - Facebook style chat for your Web App Facebook風のチャットを自サイトに組み込めるjQueryプラグイン「ChatJS」 facebook風にページ下部に表示されるあのチャットを自サイトに簡単に組み込めるプラグインです。 リアルタイム反映やemoticonが使えたり、挙動もfacebookぽいところも特徴。 サーバサイドがASP.netという点が微妙ではありますが、Node.jsとかPHPのサーバサイドも出てくるといいですね 関連エントリ JavaScriptベースのIRCっぽいチャットプログラム「Candy」 今風のWEBベースチャットを作れるオープンソースソフト「kandan」 スマホ・PCでオンラインライブチャットによる顧客サポートを簡単提供「GrooveHQ」
フラットが美しすぎるアイコン24個セット:phpspot開発日誌
Free PSD: 24 Flat Icons | Premium Pixels フラットが美しすぎるアイコン24個セット。PSD形式で配布されているそう。 iPhoneの時期OSがフラットになるとか、マイクロソフトやグーグルは既にフラットだとか、フラットの合理性に注目があつまっていたりしますが、フラットでもこれだけ美しくできるのだなと再確認させられるアイコンセット。 今後出てくるアイコンなんかもこうした美しいフラットアイコンだとWEBサイトやアプリも作りやすく、シンプルに美しくなるのかも。 関連エントリ シンプルで使えそうな５０のベクターアイコンセット アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル 地図と共に使えそうな２００のフリーベクターアイコン集 汎用で使えそうなフリーのアイコンフォント「Genericons」
ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」:phpspot開発日誌
jQuery.Shapeshift ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」。 最初に一度出して終わりなレイアウトではなくて、ユーザがドラッグ＆ドロップでレイアウトを変えられるプラグインです。 ドラッグ中もアニメーションして動きがなかなか面白いです。 関連エントリ Pinterest風のWordPressテーマ集 Twitter,Facebook,YouTube,PinterestのRSSフィードURLまとめ PinterestのPinIt機能実装jQueryプラグイン FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」
Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」:phpspot開発日誌
Superbox, the lightbox, reimagined Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 オーバーレイではなく、その場でインラインに画像が拡大されるGoogle画像検索はなかなか使いやすいですが、それを実現するためのjQueryプラグイン。 LightBoxが出たのが2005年ですが、あれからもう８年も経つんですね。あれから色々なページ内で開ける画像ギャラリーが創造されましたが、このUIもその１つですね。 １０年後の画像ギャラリーはどういうインタフェースが主流になっているんでしょうね。 関連エントリ ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン
HTMLのあらゆるエレメントに注釈を入れられるjQueryプラグイン「Chardin.js」:phpspot開発日誌
Chardin.js HTMLのあらゆるエレメントに注釈を入れられるjQueryプラグイン「Chardin.js」。 次のように注釈を入れられます。応用すれば色々と便利に使うことができそう サイトの説明やチュートリアルをオーバーレイで表示したり、サイトデザインのプレゼンなんかに使えるかも 関連エントリ iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 スプライトアニメーション作成用jQueryプラグイン「Phantascope」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 テキストを新聞風のレイアウト
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」:phpspot開発日誌
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 2013年04月11日- kamens/jQuery-menu-aim GitHub 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 次のような新しいamazonのメニュー。amazonといえば品揃えや安さだけでなく、秀逸なUIによって売上を伸ばしてきたといってもよいと思いますが、新しく実装されたドロップダウンメニューLikeなものを実装できるプラグインです。 デザインは違いますが、動作は同じです。 なかなか汎用的に使えそうなデザインですね。 関連エントリ HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 シンプルだけどデ
サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」:phpspot開発日誌
Intro.js | Better introductions for websites and features with a step-by-step guide for your projects. サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」 はじめてのサイトの場合、何をやっていいか、使い方もよくわからない場合も少なくなさそうですが、このライブラリを使えば、サイトの一部をハイライトさせて説明のチュートリアルをサイト上で作ることが出来ます。 data-step, data-introという属性を付与していくだけで、簡単に使い方のチュートリアルが作れてしまうところがよさそうです。 キーボードの左右のキーで次に送ることもできます。プレゼンのデモとして使うのもアリかもしれません。 関連エントリ サイトの使い方をその場でアニメーションしてチョー
ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」:phpspot開発日誌
Dropzone.js ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」。 ファイルをブラウザ内にD&Dすると画像ならサムネイルがすぐに表示されつつ、プログレスバーが表示されて進捗が分かり、更に完了した際にはチェックマークでアップロード完了が分かります なかなかカッコいいだけでなく、便利なアップロードが可能。 ブラウザ非対応時のフェイルバックも 関連エントリ クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 DropBoxからファイルアップロードをする＆切り取って保存するデモ jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン:phpspot開発日誌
動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン 2012年12月10日- Make an HTML5 video a background - body bg demo 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン。 Youtubeの動画を背景にするjQueryプラグインがあったりしますが、今回は自前の動画を背景に使ったサイトが簡単に作れます。 動画フォーマットも各種指定することで色々な端末に対応することができそう 実装コード。各種動画ファイルをフォーマットベースにオプション指定 若干重いですが、将来的にはこういったサイトも当たり前のように登場していることでしょう。 関連エントリ フリーのオープンソースなHTML5動画プレイヤーいろいろ
レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」:phpspot開発日誌
Calendario: A Flexible Calendar Plugin | Codrops レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」。 次のようなグラデーションが美しいカレンダーのデモとプラグインが共に配布されています。 カレンダーのHTML構造は予め決められており、CSSでデザインされています。 カレンダー機能はシンプルなものですが、コールバック等である程度カスタマイズできそうです。 関連エントリ Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダーやDateピッカー関連のjQueryプラグイン20 これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」
どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」:phpspot開発日誌
どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 2012年11月21日- any list scroller - jQuery scrolling plugin by musings.it to scroll any list with any content - musings.it web design and development どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」。 <ul><li>なリストを初期化すれば次のようなスクロールするUIに変化するみたい。 表示アイテム数の他、アイテムの間隔など細かい所もオプションやCSSで制御できるようです 動作原理は以下のようになっているらしい。 このてのスクロール系ライブラリは豊富にありますが、１つの選択肢として覚えておいてもよさそう。
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
目次のナビゲーションを自動生成してくれるjQueryプラグイン「TOC」:phpspot開発日誌
TOC | jQuery Table of Contents Plugin 目次のナビゲーションを自動生成してくれるjQueryプラグイン「TOC」 H1等のヘッドラインが綺麗に定義されているサイトであれば次のような目次のサイドバーが自動で付けられます スクロールすればカレントの目次にカーソルが移動するあたりもクール 自分で作っていたらコンテンツの追加毎にいちいちナビゲーションもいじらなくてはいけないので便利ですね 関連エントリ ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」
折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」:phpspot開発日誌
折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」 2012年10月31日- Timeliner.js Demo 折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」 Facebookのタイムラインみたいな感じで、歴史系のコンテンツを載せるのに適したプラグインです ルールに従ってHTMLを記述して、$.timeliner() で初期化する感じで使えます 会社の歴史、サービスの歴史といった感じで色々と歴史系のコンテンツはあるので、そういったものを作る際に使ってみてもよいかも。 関連エントリ Facebookのタイムラインを作る際に便利なPhotoshopテンプレート facebookのタイムラインをjQueryとCSSで作るチュートリアル Facebookのデザインにも負けない超カッコいいタイムラインを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」:phpspot開発日誌
画像のカーソル位置を拡大できるjQueryプラグイン「mlens」:phpspot開発日誌