jQueryのアニメーション関連いろいろまとめ
jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。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だけでも動きのあるサイトは作れますので、ピンポイントにでも実装してみてはいかがでしょうか。
