Professor Cloud JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ。 枠内を画像が３Dで回転します。通常こうしたUIを作るにはFlashが多いですが、JavaScriptでやっちゃってます。 クリックすればLightBoxが開きます。 関連エントリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」

jQuery.popeye 2.0 | an inline lightbox alternative インラインでその場でLightboxできる「jQuery.popeye」というスクリプトがあるみたいです。 画面をグレーにすることなくその場で画像を送れるので、地味ではありますがこういう使い方もいいなという効果を得られます。 動きとしては記事中にある、一見普通の画像。 カーソルを合わせるとナビゲーションが現れ、画像のスライドが表示されます。 微妙に、写真の下にはキャプションが表示され、写真の説明が見れます。 ありそうで、なかったですね。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 画像やページをLightBox風に表示できるThickbox 表示法が新しくセクシーなLightBox「SexyLightBox」

Zoom-Info ? How To Create An Informative Image Gallery With jQuery & CSS | AddyOsmani.com | Where Web Businesses Grow カーソルを合わせると画像がキャプション付でアニメーション表示されるギャラリースクリプト。 ギャラリーの殆どはクリックすると拡大するものですが、カーソルを合わせると、キャプションとともに画像が縮小されるギャラリーの登場。 触ってみるとなかなかクールで、何かに使えそうだなと思いました。 デモページはこちら アニメーション効果がなかなかイカしてます。 jQueryとCSSベースで構築されているみたいです。 関連エントリ 半透明がいい感じのクールな写真ギャラリー作成用jQueryプラグイン「jPhotoGrid」 3Dでクールに回転するFlashを使った画像ギャラリ

Slot Machine Tabs | CSS-Tricks タブ切り替えでコンテンツがスロットマシンっぽく切り替わるサンプル。 普通はタブをクリックするとパッと画面が切り替わりますが、このサンプルは面白くて内容がアニメーションしながらスロットマシン風にカッコよく切り替わります。 スタイリッシュ度を上げたい方は覚えておくとよいかも。 タブだけじゃなくて、画面切り替えの際にこういうアニメーションしたらそれはそれでカッコ良さそうですね。 関連エントリ わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」

Coin Slider: jQuery Image Slider Plugin with Unique Effects 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」。 画像の切替を、タイル状に切り替えたりすることができるみたいです。 jQueryプラグインなので、$(elemen).coinslider メソッドにオプション渡せば動くようになっています。 少し面白い動きを付けたい、という場合にも簡単に実装できるので覚えておくとよいかもしれませんね。 Flashで同じようにやろうとすると１からだと結構面倒そうな気がしますが、このjQueryプラグインを使うことで一瞬で実装できます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」

写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」 2010年03月31日- jQuery Reel Plugin 写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」が公開されています。 マウスで写真をドラッグします くるっと回転します。 マウスドラッグだけでなく、マウスホイールを回転させても同じ効果が得られます。 ３６０度のパノラマ写真を回転させるようなことも出来るみたいです。 商品の詳細についてより訪問者に分かりやすく伝えるとか、３６０度のパノラマ写真をみせる際のUIに使えそうですね。

Free javascript date picker - popup date picker for websites and web apps - javascriptcalendar.org 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」が公開されています。 次のように可愛いUIがいい感じです。 カレンダーピッカーのデザインもいいものを使いたい際の１つの選択肢として覚えておくとよいかも 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」

Grid Accordion with jQuery | CSS-Tricks グリッドアコーディオンを新しい情報表示の仕方をjQueryで実現しているデモとサンプルコードが公開されています。 複数のカラムから１列が構成されていて、列の特定カラムをクリックするとそのカラムが拡大しつつ、列自体も拡大されます。 動き自体も面白いのですが、比較テーブルなんかで便利に使えるかもしれませんね。 にゅっ、とjQueryでアニメーションする部分もいいですね。 関連エントリ jQueryでアコーディオン作成のチュートリアル JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

Best jQuery plugins for Twitter integration | AjaxLine サイトにTwitterの機能を組み込むためのjQueryプラグイン集。 Twitterの勢いがまだまだ衰えませんが、それにともなってサイトにTwitterの機能を実装したいというニーズも高まってきているのではないでしょうか？ そんな際に便利に使えるプラグイン集です。 Twitterのサイトが落ちた時にサイトが重くなってしまうという点に注意して使いたいですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 ajaxファイルアップロードに使えるjQueryプラグインいろいろ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」

jQuery Plugin: TinyTips 1.0 | Mike Merritt | Digital Inferno 画像付きのオシャレなツールチップを実装できるjQueryプラグイン「TinyTips」。 TinyTipsを使えば、リンクにカーソルを合わせると次のように半透明がかかった感じで画像が入ったクールなツールチップが簡単に実装できます。 実装は次のように簡単に出来ます。 まず、<a>タグのtitleをツールチップとして使うには、tinyTipsメソッドの引数にtitleをわたします $(element).tinyTips('title'); タグを入れたい場合は次のように引数にそのままタグを入れてあげればOKです。 $(element).tinyTips('<img src="images/demo-image.jpg" /><br />You can even put im

fontScaler marcup 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」。 次のように、特定のブロックを $(element).fontScaler() のように初期化するとボタンがあらわれ、拡大縮小が簡単になるプラグインがあるようです。 フォントを大きくするボタンをおしたところ。結構大きくなって読みやすくなりました。 次のように、段階を追って拡大、縮小ができるようにする機能もあります。 これはありそうでなかった気がします。 全体に適用するとデザインが崩れてしまって嫌だ、という方も、記事部分だけならデザインは崩れない＆可読性を上げることができるので便利ですね。 関連エントリ 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル フォントサイズの変更をJavaScriptによって検地する方法

Try it 文字をもあもあ、っとアニメーションさせるjQueryプラグイン「moatext」。 文字にカーソルを合わせると文字がもあもあっとアニメーションします。 訪問者に対するちょっとしたサプライズに使えます。 IE6をはじめとする殆どのブラウザに対応しているようです。 ハイパーリンクも難なくアニメーションさせることが出来ます。

Example 1 This example shows the layer appears on top or bottom. Lorem ipsum dolor Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet. Praesent Maecenas est erat, aliquam a, ornare eu, pretium nec, pede. In hac habitasse Quisque ipsum est, fermentum quis, sodales nec, consectetuer sed, quam. Nulla feugiat lacinia odio. Fusce rhoncus Praesent pellentesque nibh sed nibh. Sed ac

s3Slider jQuery plugin 画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」。 次のように、画像に半透明のキャプションを付けつつクールにアニメーションさせられるjQueryプラグインです。 動きを実際に見てみましょう。かなりかっこいいです。 s3Sliderプラグインの使い方とダウンロードはこちら 実装のHTMLは次のように結構綺麗になってますので、安心して使えます。 ページのヘッダーあたりに置くとかなりのオシャレ感を出すことが出来ますね。

YoxView - jQuery image viewer plugin 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」。 現時点で、色々なLightBoxの実装がありますが、これはなかなかカッコいいというものを見つけました。 画像をクリックすると、クリックした画像以外がグレーに暗くなります。 そこからアニメーションしながら拡大。動きは実際に見た方がいいですね。YoxView のデモ 関連エントリ かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」 表示法が新しくセクシーなLightBox「SexyLightBox」 カスタマイズできる多機能LightBox「Lightview」

ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ 2010年01月26日- 30 Stylish jQuery Tooltip Plugins ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグインが３０種類もまとまったエントリのご紹介です。 jQueryだけでこれだけあるというのは驚きなのですが、ツールチップに迷った時とかのために参考に出来そうです。 個人的には、cssでデザインできてエレメントに属性を振っておくと自動で出てくるタイプのものがいいなぁと思います。あとはアニメーション効果などもカッコいいものがいいですね

ブロック要素等をアニメーションで他に切り替えるならコレ「transm.js」。 例えば、ページヘッダーのメイン画像なんかをアニメーションさせながら別の画像に切替えるような際に使えます。 ↓アニメーション↓ これでもか、というぐらい大量のアニメーションが用意されていて、ページ上のデモで動作確認することができます。 Transition で 最初から選択されている、random を選んで「Transition area」をクリックしてアニメーションが確認できます。アニメーションの種類だけでなく、Tweeningによって加速度なんかの設定もできます 少ないスペースで時間によって出し分けたい、そしてアニメーションさせて注目を集めたいというようなシーンでかなり力を発揮してくれそうなライブラリですね。 対応ブラウザとして、Mozilla Firefox 1.5+, Opera 9+, Safari 2

1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」。 次のような、左右のナビゲーションとページ番号がついたスライドショーの実装スクリプトの紹介です。 jQueryプラグインではありませんが、jQueryバリに簡単に実装できる模様です。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', // スライドショー用のdivのID auto:3, // 自動再生の秒数 vertical:false, // 垂直方向に移動するかどうか navid:'pagination', // ナビゲーションのID activeclass:'current', // ナビゲーションLIのアクティブなクラス名 position:0 // 最初のスライド位置 }); カスタマイズも容易ですね。 デモと

JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル