jQueryのアニメーション関連いろいろまとめ

jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使いたい人向けのプラグインを集めました。

• TIPS/チュートリアル
• プラグイン/animateメソッドの拡張など
• プラグイン/単体で使えるものなど
• プラグイン/スクロール系

TIPS/チュートリアル

animate(params, options)

http://semooh.jp/jquery/api/effects/animate/params,+options/
まずはjQuery animateの基本を押さえましょう。

Using jQuery Stop

http://css-tricks.com/examples/jQueryStop/
アニメーションのキューをコントロールする。これを押さえれば結構なんでもできますたぶん。hoverで色々したい場合などはstop(true,true)が 便利です。

Start/Stop Slider

http://css-tricks.com/startstop-slider/
もうひとつCSS-Tricksから、スライダーの作り方。

Sliding Boxes and Captions with jQuery

http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
マウスオーバーでキャプションがスライドしてくる。

Create a Thumbnail with Fading Caption Using jQuery

http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery
キャプションを前面に表示するんですけど、サムネイルのアニメーションとの組み合わせがきれい。

Create a jQuery Popup Bubble

http://www.dvq.co.nz/web-design/create-a-jquery-popup-bubble-effect/
ツールチップも表示方法を変えるだけでかわいくなりますね。実装も簡単です。

Animate validation feedback using jQuery

http://www.jankoatwarpspeed.com/post/2009/09/16/Animate-validation-feedback-using-jQuery.aspx
フォームの未入力必須項目を揺らす。↓で紹介しているプラグインと組み合わせると点滅などできますね。

プラグイン/animateメソッドの拡張など

GX

http://gx.riccardodegni.net/
アニメーションに特化した拡張プラグイン。色を変えたり、キューを利用したシームレスなアニメーションなどを行えます。

COLOR ANIMATIONS

http://plugins.jquery.com/project/color
こちらはjQuery作者のJohn Resig氏がつくったカラーアニメーションプラグイン。

Background-Position Animations

http://plugins.jquery.com/project/backgroundPosition-Effect
background-positionをアニメーションできるようになります。

応用すると
http://snook.ca/archives/javascript/jquery-bg-image-animations/
こんな感じに楽しげなナビゲーションがつくれます。

addCommand.js

http://lab.hisasann.com/addCommand/
連続するアニメーションをネストせずに書いていけるプラグイン。複雑なアニメーションをする場合などに便利です。

jQuery Easing Plugin

http://gsgd.co.uk/sandbox/jquery/easing/
Easingと言えばこれ。jQueryのanimateメソッド内で指定するだけで色んな動きが使えます。

プラグイン/単体で使えるものとか

Flip!

http://lab.smashup.it/flip/
表示要素をくるっと回転させるエフェクトで切り替える。アイデアが面白いですね。

Roundabout for jQuery

http://fredhq.com/projects/roundabout/
3Dの回転を実現するプラグイン。ドラッグできたらもっといいんですけどね。

LavaLamp for jQuery lovers!

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
元々mootoolsプラグインだったLavaLampをjQueryで実現するプラグイン。装飾のないグローバルナビゲーションもこれひとつでちょっと目を引くナビゲーションになります。

可変レイアウトグリッドjQueryプラグイン

http://blog.xlune.com/2009/09/jqueryvgrid.html
グリッド系は色々ありますが、こちらが一番きれいに動きますね。

jQuery Approach

http://srobbin.com/jquery-plugins/jquery-approach/
カーソルが対象要素に近づくにつれてに文字サイズを小さくしたり透過度を上げたり･･･durationではなくカーソルの位置に合わせてanimateメソッドを実行しているような感じ。結構面白いです。

プラグイン/スクロール系

jQuery Scroll Follow

http://kitchen.net-perspective.com/open-source/scroll-follow/
スクロールに合わせて要素がついてくる。ナビゲーション等に使うのが一般的ですかね。

LOCALSCROLL

http://plugins.jquery.com/project/LocalScroll
内部の要素をスクロールで移動させてページ切り替えのようにみせる。

Easingスクロールプラグイン

http://moto-mono.net/2009/05/18/page-scrolling-with-jqueryeasing.html
Easingプラグインを利用したするするスムーズスクロールプラグイン。スクロールの動きを選べます。

他にも･･･

jQuery関連のプラグインはほとんどがアニメーション絡みだったりするので、紹介した以外にもまだまだ山ほどあります。Flashと比べるのはそもそもあれですが、JSだけでも動きのあるサイトは作れますので、ピンポイントにでも実装してみてはいかがでしょうか。