ボタンなどCSSで作った影のついたボックスにアニメーションの効果をつけれるのが、この『Shadow animation jQuery plugin』です。
この『Shadow animation jQuery plugin』はCSS3 box-shadow プロパティのボックスへ影を付ける効果を拡張してアニメーション化してくれるものです。
サンプルをご覧下さい。
→影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル
最新のブラウザに対応しています。
【使用方法】
まずはこちらのShadow animation jQuery pluginのサイトから最新のjQueryプラグインをダウンロードしてきます。クリックしてもダウンロードされないときは、右クリックで対象を保存で保存して下さい。
＜head＞部分にJavaScriptを読み込む記述をします。
|
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.animate-shadow.js"></script> |
続いてcssを記述しましょう。
CSS3 box-shadow プロパティについては、こちらのサイトを参考にされるとよいと思います。
参考：CSS3 box-shadow プロパティ
以下はサンプルで使用しているコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<style> #box1, #box2, #box3 { float: left; margin: 0 0 30px 50px; width: 100px; height: 100px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; line-height: 90px; text-align: center; border: 3px solid #a9a9a9; } #box1 { box-shadow: 0 0 10px #000000; -moz-box-shadow: 0 0 10px #000000; -webkit-box-shadow: 0 0 10px #000000; } #box2 { box-shadow: 10px 10px 15px #000000; -moz-box-shadow: 10px 10px 15px #000000; -webkit-box-shadow: 10px 10px 15px #000000; } #box3 { position: relative; box-shadow: 8px 8px 15px #666; -moz-box-shadow: 8px 8px 15px #666; -webkit-box-shadow: 8px 8px 15px #666; } </style> |
続いて＜body＞部分にアクションを起こした時の影の動きを記述します。
例えばbox1要素にマウスオーバーしたときに影をぼかした青（＃４４ｆ）に変更させて幅を広げて、マウスが外れた時はもとのスタイルに戻すためのコードは次のようになります。
|
1 |
<div id="box1" onmouseover="$('#box1').animate({boxShadow: '0 0 30px #44f'})" onmouseout="$('#box1').animate({boxShadow: '0 0 10px #000'})">mouse over</div> |
cssに精通している人はいろいろなパターンが作れると思いますので、試してみて下さいね。
以下のサンプルのソースを書いて起きます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル │ ぱんにゃっと/H&Y</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.animate-shadow.js"></script> <style> #box1, #box2, #box3 { float: left; margin: 0 0 30px 50px; width: 100px; height: 100px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; line-height: 90px; text-align: center; border: 3px solid #a9a9a9; } #box1 { box-shadow: 0 0 10px #000000; -moz-box-shadow: 0 0 10px #000000; -webkit-box-shadow: 0 0 10px #000000; } #box2 { box-shadow: 10px 10px 15px #000000; -moz-box-shadow: 10px 10px 15px #000000; -webkit-box-shadow: 10px 10px 15px #000000; } #box3 { position: relative; box-shadow: 8px 8px 15px #666; -moz-box-shadow: 8px 8px 15px #666; -webkit-box-shadow: 8px 8px 15px #666; } </style> </head> <body> <h1>影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル</h1> <div id="box1" onmouseover="$('#box1').animate({boxShadow: '0 0 30px #44f'})" onmouseout="$('#box1').animate({boxShadow: '0 0 10px #000'})">mouse over</div> <div id="box2" onmouseover="$('#box2').stop().animate({boxShadow: '-10px -10px 15px'}, 'fast')" onmouseout="$('#box2').stop().animate({boxShadow: '10px 10px 15px'}, 'fast')">mouse over</div> <div id="box3" onmousedown="$('#box3').stop().animate({boxShadow: '3px 3px 3px', top: 3}, 'fast')" onmouseup="$('#box3').stop().animate({boxShadow: '10px 10px 15px', top: 0}, 'fast')">クリック</div> </body> </html> |
あわせてお読みください
映画や舞台で、ステージのカーテン幕が開いたり閉じたりするのをみたことあると思います。 舞台が始まる前や終わった後に、左右に開いたり閉じたりするあのカーテンです。…
「jQuery.customSelect()」は、セレクトボックスのCSSをカスタマイズしてデザインを変更できるようにするjQueryプラグインです。 sele…
Real Shadow 「Real Shadow」は要素に影を付けることができるjQueryプラグインです。カーソルの位置を光源としてカーソルの動きに合わせて…
コメントを残す