画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 YoxView 画像をスタイリッシュに拡大表示するスライドショー。 Roundabout Shapes 複数のオブジェクトをさまざま

1文字ずつアニメーションしながらヘッドライン表示できるjQueryプラグイン「News Ticker」 2010年04月06日- jQuery plugins MakeMineATriple 1文字ずつアニメーションしながらヘッドライン表示できるjQueryプラグイン「News Ticker」。 ヘッドライン等を電光掲示板のように、1文字ずつアニメーション表示することが簡単にできちゃいます。 動きを入れることで、単にヘッドラインを入れるよりも注目度をあげることが出来る上、デザイン的にも目立ちすぎず派手すぎません。 → 動作デモを見る 使い方も、jQueryプラグインなので簡単で、更にニュースのリストを<ul>リストで定義できます。 <ul id="news"> <li><a href="http://www.makemineatriple.com">MakeMineATriple.com<

jQueryを使用して、LavaLampスタイルのナビゲーションを実装するチュートリアルをNettuts+から紹介します。 How to Build a Lava-Lamp Style Navigation Menu デモページ チュートリアルは当サイトでも数多く紹介していますが、コードの解説をはじめ、ステップごとの状態のキャプチャ、動画での解説と至れり尽くせりのチュートリアルとなっています。 LavaLampのスタイルもしっかりと作り込まれており、文言の幅に合わせてアニメーションでハイライトの幅が変更になります。

並列に配置されたナビゲーションの現在位置を明示したハイライトをアニメーションで移動させるスクリプトをCSS-Trickから紹介します。 jQuery MagicLine Navigation デモページ 現在位置を明示するサインは、ライン（キャプチャ：上）と背景（同：下）の2種類が用意されています。 また、背景は各ラベルでカラーが異なります。 ナビゲーションの実装はリスト要素をdiv要素で内包したシンプルなものとなっています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a hr

jQuery Horizontal Menu Style 05 (Dark Green) クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ。 次のようなデザインでカーソルを変えるとアニメーションしながらフォーカスし、ドロップダウンメニューを表示させたりすることが出来るメニューのダウンロードが可能です。 ドロップダウンが表示される部分 メニューのカラーは全部で６種類から選べます 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 クールにアニメーションする色合い様々なjQueryメニューサンプル色々 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」

CSS3を使った凄いアニメーション集４７ CSS3を使った凄いアニメーション集がまとまったエントリが公開されています。 注意点としてCSSだけで実現しているわけでなく、jQueryなども使っている部分があります。 ただ、こういうことも出来るのか、という物が沢山で見ていて楽しく学習できます。 CSS3/jQuery Clock 一見Flashかと思えるような綺麗な時計のサンプル Multiple 3D Cubes with animation using CSS 3Dのキューブがなめらかにアニメーションします。 CSS3 Matrix Animation マトリックスアニメーション OS X Dock Mac OS X風になめらかに動作するドック 今の時期だと、CSS3で出来ることはまだ出尽くしていないと思うので、驚きのエフェクトを作れば世界をワッと驚かせることが出来るかもしれませんね。

<textarea name="code" class="html" cols="60" rows="5"> <div class="slidegrid"> <div class="cell bigcell">Big Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </textarea>

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

jQueryで実装するアニメーション機能をよりスムーズにするプラグイン「hoverFlow」を紹介します。 demo 上記ページの「The Problem」のナビゲーションで、マウスを何回も上下に往復してみてください。 マウスを止めても、アニメーションが継続されてしまいます。 これを解消するために「.stop()」を使用したスタディがありますが、アニメーションがぎこちないものになっています。 そこで上記の問題を全て解決し、プラグインとしてリリースしたのが「hoverFlow」です。 ファイル容量も1KB（圧縮時）と軽量となっています。

簡単な記述で魅力的なアニメーションを実装できるCSS3アニメーションは、SafariやChromeなどの一部のブラウザでしか動作しませんが、それと同等の動作をjQueryで実装するチュートリアルをMarcofolio.netから紹介します。 CSS3 animations and their jQuery equivalents demo チュートリアルでは左にCSS3、右にjQueryで実装されたものが配置されています。 ※CSS3はSafari, Chromeで動作します。 実装しているのは、以下の5つ。 フェード バウンス パルセート ナビゲーション アコーディオン ブラウザのシェアを考慮すると、まだまだjQueryが有利かもしれません。

The documentation below is for version 1.5.1; see the release notes for the changes from previous versions. Download version 1.5.1 Demos Minimal vertical splitter: Demonstrates minimal code/markup needed to create a splitter. All the styles are included in the HTML file for this example. Vertical splitter: Vertical splitter with fixed height and fluid width. Horizontal splitter: Horizontal splitte

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

<textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#wrapper').masonry({ columnWidth: 200 }); }); </textarea>

スライド、フェード、ティッカーと三種類のモードが選択できる超軽量のコンテンツスライダーのスクリプトを紹介します。 bxSlider demo 各コンテンツはdiv, li, p要素でそれぞれ実装されており、スクリプトのオフ時にはそのまま表示されるようになっています。 スクリプトのオプションでは、三種類のモードの選択、オートとマニュアル、スピードなどが調整できます。 bxSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

JavaScriptやCSSを使用して、スクロールした際にパネルを追従させるチュートリアルをCSS-Tricksから紹介します。 Scroll/Follow Sidebar, Multiple Techniques demo チュートリアルでは、JavaScriptで実装したアニメーション版、CSSで実装した版２つの計３種類が紹介されています。 サイドバーのリストをクリックすると、追従のパターンを変更できます。 実装はシンプルで、div要素でコンテンツとサイドバーを配置し、サイドバーには「position: fixed;」を指定します。 CSS <textarea name="code" class="css" cols="60" rows="5"> #page-wrap { width: 600px; margin: 15px auto; position: relative; } #s

少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」が公開されています。 小さな枠を３分割させてページをスライドさせるなど動きとしてもおもしろいコンテンツスクローラーになっています。 少ないスペースに色々なコンテンツを置くような場合に参考にできそうです。 デモページを見るとその凄さが分かる筈。 jQueryなので次のように実装も超簡単です。 $('#flips1').flips( { autorun_delay:0, direction: 'left' } ); 詳細・ダウンロードは以下のページを参照してください。 FLIPS | jQuery Plugins