GitHub - Seebz/jquery.sharebox: Easily add a sharebox (list of social buttons) on your website FB/Google/Twitterへのシェアボタンを簡単に作れる「jquery.sharebox」 次のようなシンプルなシェアボタンをサクッと実装できるプラグインです。 data-services属性で表示したいSNSのボタンをカスタマイズ可能なのは便利 関連エントリ 主要SNSサイトのファン数等を一括表示できる「SocialCounters」

GitHub - asmsuechan/jquery_push_notification: This library allows us to use html5 NotificationAPI in jquery. ブラウザプッシュ通知を簡単に使えるようにするjQueryプラグイン「jquery_push_notification」 HTML5のNotificationAPIをjQueryベースで簡単に書けます デモ クリック時のアクション設定や、閉じた際のイベントハンドラ設定なども出来て柔軟に使えそうです 関連エントリ メッセージボックスや通知ダイアログ表示コンポーネントが多数詰まった「Lobianijs」 複数カラーで綺麗なツールチップや通知を実装できる「NTip」

jquery.easypin by atayahmet 画像上にピンを立てて注釈を埋め込むことができる「jQuery.easypin」 画像にピンを立てて、洋服等をそのまま購入に結びつけるようなUIが簡単に実装できます。 関連エントリ 画像の選択に便利なチェックボックス実装jQueryプラグイン「imgCheckbox」 WEB上での画像の切り取りの決定版jQueryプラグイン「Cropper」 Photoshopばりの画像編集エディタをサイト上で使えるようにするjQueryプラグイン「Classypicozu」 画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「toCanvas」

timekit-io/booking-js GitHub クールな予約UIを実装できる「booking-js」 次のようなGoogleアプリのようなインタフェースの予約UIが作れます。 開いている部分をクリックすれば予約が可能、という直感的インタフェースが実現できます。 関連エントリ jQueryとCSSで水平のタイムラインの実装デモ 人員のスケジュールを並べてタイムライン表示できる「schedulerjs」 FacebookスタイルのレスポンシブなタイムラインをBootstrapで実現するチュートリアル 自鯖で自分のステータスをタイムライン表示できるOSS「Cachet HQ」 タイムラインUIにラベルを付与して表示できる「Labella.js」

RPG JS ブラウザベースのRPGがつくれる「RPG JS」 現段階ではどの程度本格的な物がつくれるかは分かりませんが、サイトをRPG風のUIにしたホームページ等を作ってみても面白いかも。 マップ上でキャラを動かして何かを紹介する、というUIが適したサイト等があるかもしれませんね。 関連エントリ ブラウザトップのプログレスバーを簡単実装できる「ToProgress.js」 HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 JSでデータのビジュアリゼーション機能が豊富に詰まった「Pt.js」 テキストを独特の虹色アニメーションさせられる「Rainbow.js」

Dropify ?Override your input files with style. カッコ悪いinput[type=file]をモダンにしてドラッグ＆ドロップ対応にする「Dropify」 次のようにモダンな形にしてくれます。クリック領域も大きくなって、使いやすい。 既存イメージをサムネイルとして設定して削除したり、置き換えたりもできるようになっています 関連エントリ ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 外部サイトへの移動やファイルを開く際に警告を簡単に出せる「Jquery.exlink」

css3でハードウェアベースの高速アニメーションが実装できる「jquery.hx... 次の記事 ≫：SVGによる気持ちいいアニメーションによる画像スライダー実装「Animated...

Responsive Accordion - jQuery Plugin レスポンシブでスマホで便利に使えそうなアコーディオン実装「Responsive Accordion」 アニメーション等もいい感じでなかなか使えそうです。 関連エントリ モバイルファーストでレスポンシブなアコーディオン実装「Bellows」

GifLinks アンカーにホバーすると全画面でGIFアニメーションが再生される「GifLinks」。 ちょっと使いドコロが難しそうですが、なかなかおもしろかったのでご紹介 関連エントリ JavaScriptで動画やWebcamからGIFアニメを作れる「gifshot」

Comparing Bootstrap With Google’s New Material Design Lite | Tutorialzine BootstrapとMaterial Design Liteの比較記事。 Bootstrapがプラグイン等も豊富に出てきて、標準となってきていますが、MaterialDesignに準拠するならMaterial Design Liteも魅力的ですね。 それぞれの違いを知って、導入是非の検討材料にできそうです。 関連エントリ Bootstrapのポップアップを強化する「WebUI Popover」 Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 ポップアップ入力をBootstrapで実現できる「Bootstrap Popove

Blueprint: Product Comparison Layout & Effect | Codrops 製品の比較を行える次世代のUI実装 比較サイトなどで使える商品の比較テーブル。このUIを進化させたデザインがCodropsにて公開されています。 フルスクリーンを使ってJSで高速に動作して、なかなか便利そうです。 関連エントリ CSSアニメーションによるクリックアニメーション実装チュートリアル トランポリン風に画像を切り替えるエフェクト実装デモ 画面要素のカラーリングをドラッグ＆ドロップで行うコンセプトUI

Smoke Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 フォームのバリデートや通知、モダンなプログレスバー、フルスクリーン機能、パネル等の機能を追加できます。 より今っぽいサイトを作るのに役立ちそうなプラグインなのでBootstrapを使う人は知っておいて損は無いと思います 関連エントリ Bootstrapのポップアップを強化する「WebUI Popover」 Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 Bootstrapなサイトでレスポンシブなタブナビゲーションを実現する「Responsive Tabs」 Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」 BootstrapのDropdownを使うなら必ず知っておきたい「Bootstrap Enhanc

綺麗でレスポンシブな404,500エラー用ページを１分で作れる「Better Error Pages」 2015年05月20日- StatusPage.io - Hosted Status Pages for Your Company 綺麗でレスポンシブな404,500エラー用ページを１分で作れる「Better Error Pages」 エラーページは通常ではほぼ見られないため、リソースをかけづらいという点があると思いますが、こうしたツールでサクッと作れると便利そうです。 現在は3つのテンプレから選んでそれらをカスタマイズして作るという感じになっています。 ローカライズが必要ですが１から作るよりも便利な面がありそう 関連エントリ レスポンシブな固定ナビゲーション「Responsive & Fixed One Page Nav」 レスポンシブに要素を消さずに変形するテーブル実装jQueryプ

AgeCheck.js JSモーダルで年齢チェックができるようにする「AgeCheck.js」 年齢確認するまで他の操作を行えないように出来ます。海外ではよくあるUIですが、年齢確認の必要なサイト作成の際に活用できるかも 関連エントリ CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」 Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 Bootstrapなサイトでいい感じのモーダルダイアログを実装できる「uiblock」 カスタマイズ性の高いモーダルダイアログ実装ができる「plainModal」

rainyday.js 画像に雨の日のエフェクトをつけられる「rainyday.js」 普通の画像をCanvasで曇らせて水滴を付けてアニメーションさせるという効果をJSで表現できます。 関連エントリ スクロールに応じて奥行きのある3Dアニメーション表現ができる「Space.js」 JSでiOS,Android,WindowsPhoneのネイティブアプリが作れる「NativeScript」 スマホでも動作するJS製の2D物理エンジン「Matter.js」 Googleマップ風に画像を複数ならべてギャラリー風にできる「Eco-Scroll.js」 ネイティブアプリに近い動作のサイドメニューWeb実装「Slideout.js」

Animated-megadrop by djsmithme メニューが多い場合のMegaメニューのドロップダウン実装「Animated-megadrop」 選択肢が多くても大丈夫なMegaメニューをピュアCSS or JSアニメーションで表示できるライブラリ。 アニメーションも表示方法が独特で下からフェードインしてくる感じが面白い 関連エントリ スマホ用メニューっぽいスライドするメニューが作れる「jQuery Sliding Menu」 モバイル用のメニュー実装の一案「jquery-megakrill」 スマホ等用に複数階層のメニューが作れる「navgoco」

jQueryTween - Lightest Tweening Engine for jQuery 軽量＆多機能なアニメーションエンジン「jQueryTween」 ハードウェアアクセラレーションがかかったアニメーションを簡単実装できます。使い方も簡単。 関連エントリ リアルなページめくり効果をもったギャラリーが作れるjQueryプラグイン「Onebook3d」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」

Inspiration for Button Styles and Effects | Codrops CSS3等をフルに活用してボタンのホバー時のエフェクトをこれでもかという位あつめたサンプル集。 単に数を集めただけではなく、それぞれの質も高く、流行りのデザインの物がまとまっているという感じで、ちょっとカッコいいボタンを作りたいというケースに参考になるサンプルです 関連エントリ ドラッグ＆ドロップにまつまるUIデザインのアイデア集 汎用iOS8用アプリアイコン30個セット「Jellycons iOS 8 App Icon Set」 フルスクリーンオーバーレイエフェクトの色々サンプル

markcell/jQuery-Tabledit GitHub テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」。 セルをクリックしてそのまま編集したり、編集ボタンを押してから編集可能になり、Saveボタンで保存、削除ボタン→確認で削除といった機能を埋め込むことが出来ます。 デモでは次のようにBootstrapをベースとして作られておりBootstrapなサイトでも便利に使えそう。 編集開始→保存時の挙動が細かく調整できるのはよさそうです 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」

PWS Tabs jQuery Plugin イマドキなデザインのタブUIを実装できるjQueryプラグイン「PWS Tabs」 次のようなイマドキのフラットデザインでアイコン付きのタブUIを実現できます。 タブをサイドや下部にもってくることも可能 関連エントリ レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」 Bootstrapなサイトでレスポンシブなタブナビゲーションを実現する「Responsive Tabs」 ChromeのタブっぽいUIをブラウザ上で実現する「ChromeTabs」