カーテンをスルスルとアニメーションで開閉するスクリプトをBuild Internet!から紹介します。 Animate Curtains Opening with jQuery demo デモでは「Pull Me」とあるロープをクリックすると、カーテンがスムーズなアニメーションで開閉します。 オプションで、トリガーの変更、カーテンの開閉時のサイズ（%, px）、開閉時のスピードなどを調整できます。 スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。

ホバー時に浮かぶエフェクトがとってもリアルなスクリプトをAdrian Pelletierから紹介します。 Create a Realistic Hover Effect With jQuery demo デモはReflection（鏡面反射）とShadow（影）の二種類があり、それぞれホバーして浮かんだ際、鏡面反射と影が距離に合わせてサイズが変わります。 スクリプトのベースにはjQueryが使用されているため、実装にはjquery.jsが必要です。

Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ

Natalie Downeから、PDF、MP3、DOCファイルなどにリンクした際、自動でファイル容量を表示するスクリプト「addSizes.js」を紹介します。 addSizes.js Snazzy automatic link file-size generation デモ addSizes.jsでファイル容量を表示するのは簡単で、「addSizes.js」と「jquery.js」を外部ファイルとして設置し、PDFファイルへのリンクを「http://」から記述するだけです。 ※リンクの記述は、絶対パスのみ有効です。 対応ファイルは初期設定では、「.pdf」「.doc」「.mp3」「.m4u」となっています。 他の種類のファイルを追加する場合は、addSizes.jsのL.2に追加します。 例：「.jpg」を追加する場合 <textarea name="code" class="js" c

背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through

37 signalsで、Lightboxの是非というか議論がありました。 Been lightboxed lately? 個人的には、スクリプト自体は好きですが、設置するのはどちらかというと否定的です。 もちろん、写真のギャラリーなどにはかっこいいと思います。 とはいえ、当サイトでも画像拡大系のスクリプト(Highslide JS)を使用しています。 例：Highslideの実装ページ 使用している理由は、サイトのレイアウトに依存せず大きい画像(関連画像)が掲載できるためです。 また、背景一面がブラックにならずに、コンテクストが失われにくいためです。 以下に、上記サイトで議論されているそれぞれのいい点・悪い点を列挙してみました。 今度、クライアントに設置の依頼を受けた際にでも、再考しようと思います。 ポップアップウインドウよりいい。 ギャラリーなどには適している。 別ウインドウや別ページに

サイドバーなどの省スペースにぴったりな、複数のパネルをスムーズなアニメーションでスライドして切り替えるスクリプトをQuenessから紹介します。 jQuery Sliding Tab Menu for Sidebar Tutorial demo デモでは、タブをクリックすると、それに対応したパネルがスライドして表示されます。 各パネルはコンテンツの量に合わせてサイズが調整されます。 タブとパネルはそれぞれdiv要素で実装されており、スライドのアニメーションにはjQueryとjQuery.ScrollToが使用されています。

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Image Rotator スタイリッシュな画像ギャラリー。 GalleryView インターフェイスが豊富な画像ギャラリー。 Sl

表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。

Simple Toggle with CSS & jQuery demo デモではバーをクリックすると、パネルがスムーズに開閉します。 それぞれのパネルは個別に開閉するため、同時に開いた状態にすることも可能です。 バーはH2要素、パネルはdiv要素で実装されており、パネル内には画像やテキストなどを自由に配置することができます。 HTMLの基本構造 <textarea name="code" class="html" cols="60" rows="5"> <h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div> </textarea>

スクリプトオフやスクリーンリーダーでも情報入手に支障がないように設計された、アクセシブルなパネルを開閉するスクリプト「jQueryFAQ」をCSS Tricksから紹介します。 Dynamic FAQ Page demo デモでは、Q&A形式のパネルがdl要素で実装されており、それぞれのパネルは「answer」をクリックするとスムーズに開閉します。 スクリプトのオフ時、スクリーンリーダーの使用時にも情報入手には支障がないように設計されています。 jQueryFAQはjQueryのプラグインのため、実装にはjquery.jsが必要です。 Q&AなのにFAQなのは、気になるところです。

ボックス状に配置した画像のキャプションをスタイリッシュな動きでスライド表示させるスクリプトをBuild Internet!から紹介します。 Sliding Boxes and Captions with jQuery 画像とキャプションを囲むdivに「.boxgrid」を指定、スライド表示させるパネルには「.cover」を指定して使用します。 スライドするパネルにはdivを使用しているため、テキストやリンクなどを自由に配置できます。 スライドの動作パターンは、6種類あります。

divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。

複数の画像をフラッシュのようにフェード効果で画像を表示するスライドショーを実装するスクリプトを紹介します。 Slideshow JS demo デモでは、サムネイルが両端の矢印アイコンでスライドし、サムネイルをクリックすると画像がフェードで切り替わります。 対応ブラウザは、IE7, Fx, Op, Safari, Chromeとなっており、サポート対象外ですがIE6でも動作します。 Slideshow JSはjQueryのプラグインのため、実装にはjquery.jsが必要です。

ページの端にコンテンツをちょっとだけ見せて、マウスのホバーで雑誌のようにペロッとめくるスクリプトをSoh Tanakaから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="pageflip"> <a href="#"> <img src="page_flip.png" alt="" /> <span class="msg_block">Subscribe via RSS</span> </a> </div> </textarea>

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Beautiful jQuery sliders 洗練されたインターフェイスの画像ギャラリー。 BigPicture パネル表示やギ

BySlideMenu パネルが水平方向に伸び縮みする通常のタイプから、トリガーをマウスオーバーからクリックに変更したものや、伸び縮みのアニメーションのエフェクト変更など多彩なカスタマイズが可能です。 デモでは水平タイプのほかに、垂直タイプやテキストタイプなど12種類あります。

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 GalleryView さまざまなインターフェイスを備えた画像ギャラリー。 Image Slide Show with Semi-T

iPod風のドリルダウン型、飛び出すエフェクトのフライアウト型、シンプルなドロップダウン型など、アニメーションのエフェクトを持ったナビゲーションのスクリプトをfilament groupから紹介します。 Dropdown, iPod Drilldown, and Flyout styles demo: drilldown 上記のデモでは、クリックした項目のパネルが次々にスライドするドリルダウン型のナビゲーションで、上部にはパンくずが実装されています。 パンくず機能の代わりに、戻る機能の「Back」ボタンが実装されているものもあります。