操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」 2010年12月21日- MessageBar ? just another jQuery plugin 操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」。 エラーや何かメッセージを表示したい場合、一番分かりやすい例としてalertがありますが、なんとも味気ない感じになってしまうのは否めません。 MessageBarプラグインを使えば、指定したブロックエレメントの上部に分かりやすくアニメーションしながらクールにメッセージを表示できます。 デザインが色々と選べるのもこのプラグインの特徴です。 半透明で要素にオーバーレイして表示 角丸のウィンドウっぽいバーをスライドアニメーションしながら表示 シンプルですが落ち着いたデザインのバーを表示

2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連

横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..

他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」 2010年12月09日- dhlavaty/jQuery-SmartColumnScroller - GitHub 他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」。 通常、複数のカラムがあると、どちらかの縦の長さが長いので、下の方にスクロールしていくとどちらかが見えなくなってしまいます。 たとえば、ブログ等だと左カラムの記事部分が長くなりがちです。メインである記事を読み終えた後は、スクロールしたことで右カラムの内容も綺麗になくなっていますね。 左カラムが縦長の場合、右カラムに空白が出来てしまう このプラグインを使えば、右カラムが見えなくならないよう、右カラムがうっとうしくない具合に付いてきてくれま

25 jQuery Tutorials for Improved Navigation Menus ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集が紹介されています。 How to Make a Smooth Animated Menu with jQuery アニメーションする、おしゃれなメニュー Create an Apple Style Menu and Improve it via jQuery Apple風のクールなメニュー。アニメーションしつつ、アイコンも表示してくれなかなかクール Create a Slick Tabbed Content Area Using CSS and jQuery 少ないスペースにタブを設置してメニューにしている例。アニメーションもあり。 Using jQuery for Background Image Animat

jQuery Plugin: rotate3Di - Flip HTML content in 3D - zachstronaut 要素を3D回転させて注目を集められるjQueryプラグイン「rotate3Di」。 次のように、四角い要素にカーソルを合わせると回転します。 Chromeだと本当に滑らかに動いてインタラクティブ要素として面白い効果を付けられます。 次のように、要素に対して rotate3Di メソッドを実施するだけ。 第一引数は回転のdegreeで、第二引数はdurationとなります。 $('#rot-ex').rotate3Di(180, 3000); デモにあるような小さいものではなく、もっと大きな要素を回転させると大きなインパクトが得られそうです。 対応していないブラウザでは何も起りませんが、なかなか面白いプラグインですね。 関連エントリ ピュアCSS3で3Dアニメー

カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき

次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」 2010年11月28日- Supersized - Full Screen Background/Slideshow jQuery Plugin 次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」。 画像のスライドショーと言えば、次や前の画像はナビゲーションだけでわからないものがほとんどですが、このギャラリースクリプトを使えば次のように次・前の画像のサムネイルを表示しつつフルスクリーンでスライドショーを実現できます。 基本は$(element).supersized(); を呼び出すのですが、オプションを豊富に渡せて動きを自由にカスタマイズすることが可能です。 ナビゲーションのUIもなかなか秀逸なのでカッコイイ写真の

jQuery Matrix | Romanovian 普通のサイトを一瞬でマトリックス風にできるjQueryプラグイン「jQuery Matrix」。 次のように、一見何の変哲もない普通のサイトがありますが、.matrix() メソッドで瞬時にマトリックス化されます。 以下がその結果。 なんだ、文字と色かえただけじゃん、と思われた方も多いかもしれません。 しかし、別のデモを見ると画像をマトリックス化してるデモが・・・。なんとアスキーアートです。 テキストなので選択も出来ます。 アスキーアートとして使う文字は自分で配列で指定できるのですが、次のように１文字で表現することもできます。 なんか最後はあまりマトリックス関係なくなってしまいましたね。 単純に、写真へのエフェクトとしてかけてみるだけでも面白い効果が得られそうですね。 関連エントリ ユーザ登録時にパスワード強度表示を入れてと言われた場合

なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 2010年11月18日- hash slider by manjographics なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 コンテンツ自体はul > li リストに埋め込んで、ナビゲーション用のタグを定義して必要なcssとjsをインクルードすれば自動でスライダーにしてくれます。 プラグイン内で自動で初期化してくれるため、コーディング不要です。 デフォルトでは独特のUIですがCSSによるカスタマイズが可能です。 色々と使えるかもしれませんね。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル 軽量の

infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル

bxCarousel | jQuery Carousel Plugin 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 次のようなUIでamazonの関連商品を出すような場合に使えそうです。 個々のアイテム自体はulリストで定義するだけなので簡単。 ブログ記事の最後なんかに設置することもできそう 関連エントリ JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル カルーセルやページャ機能がついたYUI 2.6.0がリリース

Inset Border Effect jQuery Plugin by Robin Thrift This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. DOWNLOAD v1.0 Usage Simple: $("img").insetBorder(); All options: $("img").insetBorder({ speed : 1000, // 1000 = 1 seco

Plugins | jQuery Plugins Amazonスタイルのアイテムスクローラー実装jQueryプラグイン。 amazonでよく見る次のようなアイテムスクローラーをjQueryで簡単に実装できます。 <ul>でアイテムリストを定義しておいて、$(element).amazon_scroller({options}); のようにして簡単に初期化することが可能です。 ブログエントリの下部でのオススメ商品なんかの紹介に使えそうですね。 関連エントリ 画像を縦・横にゆっくりスライドさせたい場合に使えるjQueryプラグイン「PanoScroll」 カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組み コンテンツを滑らかにスライドさせるjQueryプラグイン

Beautiful Background Image Navigation with jQuery | Codrops 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例。 デモページを見ていただくとそのクールさ加減が分かると思います。Flashを使わずになかなかクールな効果が出てますね。 ちょっとしたプロモーションサイトなんかに導入してみるのもよさそうです。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル 泡のアニメーションで癒しを演出できるjQueryプラグイン「Bubble Engine」 キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム jQueryでアニメーションするソート可能なデータグリッ