Ladda ボタンに直接ローディングアニメーションを付けられる「Ladda」。 ボタンを押すとボタンに回転するアニメーションが付与され、そのまま結果をまつ、というような分かりやすいUIが実現可能です 文字＋ボタンを円形のボタンにして背景をグレーにしたり、そのボタン自体をプログレスバーにしてしまうなど、面白いデモが詰まっていますので一度是非試してみて下さい 色々なUIのデザインの仕方があるなぁという関心をしてしまいますね 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなア

jQuery Stick ’em: Make Content Sticky on Scroll, to a Point | Viget コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」。 最近よくある、ページをスクロールしてもついてくるサイドバー。position:fixedなどを応用して綺麗についてくるようにできますが、コンテンツが大きく３つに分かれている場合はちょっと実装が難しいかも。 そんな時に使えるのがこのプラグイン。デモページを見て頂ければ分かりますが、コンテンツごとに固定されるサイドバーをわけられるようです。 スクロールしても、サイドバー「Heading」と書かれた部分は右側に固定されて表示されます。 更にスクロールするとコンテンツが別れるので、それ以上は下に来ません。 １から実装するとなるとpositionの切り替えが結構大変で挫折しがちな

画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 2013年01月18日- Image Picker 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」。 好きな画像を選んでもらう、というようなインタフェースを考えた時に、画像をそのまま表示してクリックして選ぶというのが当たり前のインタフェースですが、これをHTMLで簡単にできるようにするのはちょっと面倒。 というわけで、こちらのプラグインを活用すれば、selectボックスを簡単に画像選択UIに変換出来ます selectのoptionにdata-img-srcといった感じで画像のパスを定義しておいてあげればOK Pinterest風なレイアウトに出来るのも今時のライブラリ感がありますね 関連エントリ フォームをカッコよくするjQuery

Keypress: A Javascript library for capturing input キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 jQuery等に依存せず、簡単に使えるキーボードイベント実装ライブラリ。単体キーだけでなく、複数のキーの組合せや、キーを押した順によってイベントを発動させることができ、とりあえずキーボードショートカットなんかを入れたいという場合に簡単に使えそうです。 ライブラリを使ったイベント実装コードは以下。Shift+Sで発動する関数を設定しています。 keypress.combo("shift s", function() { console.log("You pressed shift and s"); }); 次のような感じで、キーボードを↑↑↓↓〜という感じに順に打ってイベントを発動させることも可能 keypr

Swatch Book with CSS3 and jQuery | Codrops 超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル。 次のような綺麗なデザインの単語帳っぽいものを実装するチュートリアルです。クリックすればインタラクティブに回転等を加えながら動くのが特徴です。 CSS3によって秀逸にデザインされているため、質感はかなり美しく、更にアニメーション等の動きが加わることでよりリアルになってます。 若干動きがもっさりしているようですが、一度見ておいて損はないデモです 一昔前は、ちょっとWEBのデザインが上手であればプロに間違われるなんてこともありましたが、こういうのが当たり前になってくると、プロとアマの差がどんどん広がってくるのかもしれませんね。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル コンテンツをアニメーションさせつつ切り替えるタブを

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

QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」

Websanova - wPaint jQuery Plugin お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」 div id="container" の要素があったとして、var wp = $("#container").wPaint([options]); とすれば簡単にHTML5キャンバスを使ったお絵かきウィジェットが作れます。 知識ゼロでこうしたものを作るとなるとかなり大変なものがありますが、簡単に実装できるというのはよいですね お絵かきというのは昔から人気の面白いコンテンツであるわけですが、実装したいってなった時に手軽に参考にできそうです 関連エントリ リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ コンテンツの折りたたみを楽々実装できるjQueryプラ

アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 2012年03月13日- playground.mobily.pl - marcin dziewulski - MobilyBlocks アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」。 ソーシャルサイトにシェアする際なんかに使えそうなボタンを簡単に実装できます。 そもそもボタンもいい感じなんですが・・ クリックするとアニメーションしながらソーシャルサイトのアイコンが表示されます。フェードもいい感じ。 ボタンだけじゃなくって写真にだって適用してみても面白いというデモも公開されています 省スペースなので邪魔にならない、だけど多機能を盛り込めるというところで使い勝手はよさそう 関連エントリ リッチなドロップダウンメニュー実装ができるjQue

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

Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery＆CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。 アイデアの応用で面白いインタフェースが作れそうです ボタンがあってクリックするとアニメーションしながら伸びて検索フォームになります ボタンをクリックすると立体的にキューブっぽく回転して検索入力ボックスが現れます これを見ると、ああなんかまた色々と出来て数年後にはどうなっていっちゃうんだろう、ついていけるんだろうかなという不安すら覚えてしまいますね。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 高機能なカルーセルを実装

jQueryMobileよりも軽くて使いやすそうなモバイルサイト作成フレームワーク「jQ.Mobi」 2012年01月18日- jQ.Mobi jQueryMobileよりも軽くて使いやすそうなモバイルサイト作成フレームワーク「jQ.Mobi」。 まだデファクトスタンダードはjQueryMobileではないと思われる激戦区のモバイルサイト作成フレームワークに新しい物が登場。 その名もjQ.Mobi。jQueryMobileが24kbに対してこちらは3.5kb。 実働サンプルをiPhone4Sで見て見ましたが、かなり快適に動作するみたいです。 PhoneGap等と組み合わせるといい感じのアプリが作れるかもしれませんね。 iPhone4Sを使っていると、HTML5アプリの時代はもう来ているというそんな気にさせられます 関連エントリ Android風の日付ピッカー実装用jQueryMobileウ

jQuery Timelinr ○○の歴史を分かりやすくタイムラインにできるjQueryプラグイン「Timelinr」。 次のような年をインデックスとしたスライダーを作ることができるjQueryプラグイン。 会社の歴史とか、PHPの歴史とかなんでもいいのでタイムラインをちょっと雰囲気を持たせながら表示させたい場合に使えそうです 年部分をクリックするとかっこよくアニメーションしながらスライドしてくれます。 すべての内容は１個のHTMLに入れられて作るのも楽そうです。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 RSSやATOMフィードを読み込んで表示できるjQueryプラグイン「FeedEk」

Magic 3D Photoshop Action | Vandelay Design Blog まるで魔法のようだ(iPadのCM風）。２Dの図形を輝く３D画像にしてくれるPhotoshopアクション。 ワンクリックで２Dの図形がピカピカ輝くMac OSのアイコンみたいになります。サイトのロゴなんかに適用してみても面白そうです。 こういう物がいっぱいあると本当に楽になりそうですね 関連エントリ Instagram風エフェクトをかけられるPhotoshopアクション集 色調を様々に変えてくれるPhotoshopアクション80

8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 １から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます（デモ）。 こんなことできるんっ、という声が出てしまうかも（Androidはドラッグのみ） jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ＆ドロップが可能 Jquery Swipe スワイプイベン