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

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

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

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

DEMO

AD

共通

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

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

Shadow animation jQuery pluginを使います。

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

jQuery Background Positionを使います。

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

jQueryUIを使います。

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

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

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