div要素で配置したコンテンツ（パネル）を自動で重ねて、本のようにページをめくるアニメーションで次々にコンテンツを表示するスクリプトを紹介します。 Viewbook - jQuery Plugin デモ [ad#ad-2] 次のページをめくるには三通りの方法が用意されています。 「Next」「Previous」で、次・前へ ページのナンバリング ※違和感がありますが キーボードの矢印キー 中でも、キーボードでの操作が楽でいいですね。 Viewbookの実装 各パネル（ページ）はdiv要素のため、画像やテキストなどさまざまな要素が配置できます。 HTML コンテンツはdiv要素の入れ子で構成されています。 idのmybookは自由に変更できます。 <div id="mybook"> <div class="vb-load"> <div>Page 1</div> <div>Page 2</di

テキストリンクをはじめ、p, span要素のテキスト、li要素のテキスト、div要素、img要素などさまざまなDOM要素に、アニメーションを伴ったツールチップを表示するjQueryのプラグインを紹介します。 jQuery Bubble Popup v.2.0 デモページ：さまざまなDOM要素への実装例 [ad#ad-2] Bubble Popupの対応ブラウザ Internet Explorer 6.5, 7, 8, 9 (beta) Firefox 3.5.x Safari 5.0.x Opera 10.x Chrome 6.0.x iCab 4.x Webkit based browser (reKonq, Arora) KHTML-based browser (Konqueror) Bubble Popupの主な特徴 あらゆるDOM要素にツールチップ、ポップアップを作成できます。 ツ

リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun

パネルをクリックすると、次々にパネルがスライドして重なり順が変わるエフェクトを実装するjQueryのチュートリアルを紹介します。 Opera mobile window chooser, recreated with jQuery デモページ [ad#ad-2] このエフェクトはOpera Mobileの「window chooser」を模したものらしいです（持ってないから分からないです）。 HTMLはリスト要素で実装されており、非常にシンプルです。 HTML 最小限の要素にした例です。 最初に一番上にするパネルに「current」を与えます。 <ul id="container"> <li class="current">最初に表示するパネル</li> <li>パネル2</li> <li>パネル3</li> <li>パネル4</li> </ul> HTML デモでは、パネル内のコンテンツ

当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ（3.0.7）して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前： 表示 - 非営利 - 継承 2.1 日本 変更後： 表示 - 継承 2.1 日本 使用条件 上記のライセンスに従い、個人でも商用で

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 bxSlider 多彩な表示方法に対応したコンテンツスライダー。 Sudo Slider 各パネルがブックマークできるコンテンツスラ

IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて

設置も簡単、カスタマイズも簡単、ページをスクロールするとパネルがアニメーションで表示されるスクリプトを紹介します。 SlideNote デモページ [ad#ad-2] デモではページを下にスクロールすると、パネルがアニメーションでスライド表示されます。 ※キャプチャは瞬時に上に移動して撮りました。 SlideNoteの実装 スクリプトのセットアップ 「jquery.js」と「jquery.slidenote.js」を外部ファイルとして指定します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.slidenote.js" type="text/javascript"></s

Twitterでつぶやいたツイートをあなたのブログやサイトに簡単に設置できるjQueryのプラグインを紹介します。 jTweetsAnywhere デモページ [ad#ad-2] jTweetsAnywhereの設置は簡単で、数行のスクリプトで自分のブログやサイトにツイートを設置することができます。 jTweetsAnywhereの主な特長 指定したユーザー（複数可）のツイートを表示。 ユーザーのリストからツイートを表示。 Twitterの検索の結果を表示（パラメータは全対応）。 @Anywhereに対応。 エンドレススクロールを使ったページングをサポート。 自動更新でリアルタイムにツイートを表示。 ツイートボックスのカスタマイズが可能。 Follow me ボタンの設置が可能。 ネイティブのリツイートをサポート。 ユーザーのプロフィールを表示。 ツイート内のリンクを検出し、自動でリンク化

オーバーレイを使って、付加情報をアニメーションでかっこよく見せるjQueryのチュートリアルを紹介します。 jQueryといえば、先週末に1.4.3にバージョンアップしましたね。 Annotation Overlay Effect with jQuery デモページ [ad#ad-2] 実装 HTML HTMLはクリーンでシンプルです。元画像（image_wrap）とオーバーレイ画像（zoom_overlay）をdiv要素で内包します。 &lt;div&nbsp;class=&quot;portfolio&quot;&gt; &lt;div&nbsp;class=&quot;portfolio_item&quot;&gt; &lt;div&nbsp;class=&quot;image_wrap&quot;&gt; &lt;img&nbsp;src=&quot;images/website1

デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。

jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-

テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど高性能な上、超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ jQuery plugin: Easy Accordion デモページ [ad#ad-2] Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。 自動スライド、手動スライドの切り替えが可能。 同一ページに複数のアコーディオンを配置可能。 初期表示に任意のスライドを指定可能。 画像を使用しないで設置可能。 カスタマイズが容易（高さ・幅・ボーダー・背景画像など） アクセシブルで、SEOにもフレンドリー。 さまざまな

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Shadow animation シャドウをアニメーション。 bgFade マウスホバーで背景をフェードでアニメーション。 hove

jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4

カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。

MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。

Animated table sort (REGEXP friendly) デモ 上記デモではヘッダをクリックすると、各データがアニメーションでソートされます。 スクリプトは正規表現をサポートしており、数字やASCII文字を上昇あるいは下降を用いてソートするかどうかをコントロールすることができます。 Animated table sortはjQueryのプラグインのため、実装にはjquery.jsが必要です。