2013
05/07

animateメソッドが適用できないプロパティをプラグインを使ってアニメーションさせる

jQueryのanimateメソッドはwidth,height,left,topなどをアニメーションさせることができますが、box-shadowやbackground-position、colorなどアニメーションさせることができないプロパティも多くあります。
※値として単一の数値を取らないプロパティはアニメーションさせることができません。

jQuery単独ではアニメーションさせることができないプロパティでも、プラグインを使用することでanimateメソッドとまったく同じ文法でアニメーションを実装することができます。

中でもアニメーション効果を与えることで簡単にリッチな表現が可能となるbox-shadow、background-postion,background-color,colorの各プロパティをアニメーションさせる方法とプラグインを紹介します。

DEMO

ADs

共通

何はなくともjQueryを読み込みます。DEMOでは1.9を使いましたが1.8でも問題ありません。

box-shadowをアニメーションする

Shadow animation jQuery pluginを使います。

background-positionをアニメーションする

jQuery Background Positionを使います。

background-color、colorをアニメーションする

jQueryUIを使います。

いずれも通常のanimateメソッドと同様の連想配列ですので、難しい点はほとんどないと思います。
(DEMOでは省略していますがeasingやコールバックも使えます)

簡単に実装できますが閲覧者に対するインパクトが大きい効果だと思いますので、ぜひ試してみてください。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。