[JS]シャドウをふんわりとアニメーションで変化させるスクリプト -Shadow animation

CSS3のbox-shadowで適用したシャドウをふんわりとアニメーションで変化させるjQueryのプラグインを紹介します。

ボタンなどにシャドウを使用した際には、よりリアルな効果を与えることができます。

Shadow animation jQuery plugin
デモページ

[ad#ad-2]

アニメーションで変化できるのは、CSS3のbox-shadowで指定できる表示位置（X軸オフセット・Y軸オフセット）、ぼかしの半径、シャドウの半径、カラー、となっています。

各デモのスクリプトでの指定は下記のようになります。

JavaScript：左端

onmouseoverで、ぼかしの半径を30ox、カラーを#44fに

$('#box1').animate({shadow: '0 0 30px #44f'}); 

JavaScript：真ん中

onmouseoverで、ぼかしの半径を50pxに

$('#box2').animate({shadow: '0 0 50px'}, 'fast'); 

JavaScript：右端

onmousedownで、表示位置を3px, 3px、ぼかしの半径を3pxに

$('#box3').animate({shadow: '3 3 3px', top:3), 'fast'});