影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』

ボタンなどCSSで作った影のついたボックスにアニメーションの効果をつけれるのが、この『Shadow animation jQuery plugin』です。

この『Shadow animation jQuery plugin』はCSS3 box-shadow プロパティのボックスへ影を付ける効果を拡張してアニメーション化してくれるものです。

サンプルをご覧下さい。

→影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル

最新のブラウザに対応しています。

【使用方法】
まずはこちらのShadow animation jQuery pluginのサイトから最新のjQueryプラグインをダウンロードしてきます。クリックしてもダウンロードされないときは、右クリックで対象を保存で保存して下さい。

＜head＞部分にJavaScriptを読み込む記述をします。

<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>

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 プロパティ

以下はサンプルで使用しているコードです。

<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>

<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要素にマウスオーバーしたときに影をぼかした青（＃４４ｆ）に変更させて幅を広げて、マウスが外れた時はもとのスタイルに戻すためのコードは次のようになります。

<div id="box1" onmouseover="$('#box1').animate({boxShadow: '0 0 30px #44f'})" onmouseout="$('#box1').animate({boxShadow: '0 0 10px #000'})">mouse over</div>

1	<div id="box1" onmouseover="$('#box1').animate({boxShadow: '0 0 30px #44f'})" onmouseout="$('#box1').animate({boxShadow: '0 0 10px #000'})">mouse over</div>

cssに精通している人はいろいろなパターンが作れると思いますので、試してみて下さいね。

以下のサンプルのソースを書いて起きます。どうぞご参考まで。

<!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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル │　ぱんにゃっと/H&Y</title>

<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>

</body>

</html>

あわせてお読みください

舞台のカーテンを開けるような効果のアニメーションをjQueryとCSSで再現する

映画や舞台で、ステージのカーテン幕が開いたり閉じたりするのをみたことあると思います。舞台が始まる前や終わった後に、左右に開いたり閉じたりするあのカーテンです。…

select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」

「jQuery.customSelect()」は、セレクトボックスのCSSをカスタマイズしてデザインを変更できるようにするjQueryプラグインです。 sele…

簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」

Real Shadow 「Real Shadow」は要素に影を付けることができるjQueryプラグインです。カーソルの位置を光源としてカーソルの動きに合わせて…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』

→影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』

→影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル

あわせてお読みください

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル