jQuery でドロップシャドウ

JavaScript jQuery

jQuery でドロップシャドウ

1: Drop Shadow

2: 文字にドロップシャドウ

3: 画像にドロップシャドウ

4: DIV要素にドロップシャドウ

ドロップシャドウといえば、画像ソフトなどでは定番のエフェクトのひとつですが、それをJavaScriptで行うというプラグインを紹介します。

あらかじめ画像などで用意できないケースで、たとえば動的に生成する文字やボックスへドロップシャドウをつけたいというニーズには有用なプラグインといえます。

jQuery
- jquey.jsのダウンロード
Drop Shadow
- デモ
- jquery.dropshadow.js ダウンロード(クリックするとダウンロードします)
- jquery.dimensions.js も必要です
jQueryのダウンロードと設置

Drop Shadow

Drop Shadowを使うためには、jquey.jsの他に上記のサイトでサイトでjquery.dropshadow.jsとjquery.dimensions.jsを入手します。

まず、その設置方法から見てみます。

<script type="text/javascript" 
        src="./jquery.min.js">
<script type="text/javascript" 
        src="./jquery.dimensions.js">
<script type="text/javascript" 
        src="./jquery.dropshadow.js">

これで、必要なライブラリを読み込み完了し準備が整います。

では、とりあえず簡単なサンプルを作ってみましょう。下ボタンをクリックしてみてください。

JavaScript

ソースは次の通り。

<script src="./jquery-1.2.3.min.js" 
        type="text/javascript"></script>
<script src="./jquery.dimensions.js" 
        type="text/javascript"></script>
<script src="./jquery.dropshadow.js" 
        type="text/javascript"></script>

<style type="text/css">
.myShadow1 {
  font:900 50px Arial;
  color:orange;
}
</style>

<input type="button" 
       onclick="$('.myShadow1').dropShadow()" 
       value="shadow!">
<input type="button" 
       onclick="$('.myShadow1').removeShadow()" 
       value="remove">

<div style="position:relative">
  <div class=""myShadow1">JavaScript</div>
</div>

このサンプルでは、myShadow1クラス要素内の文字列「JavaScript」へ影を付けます。

$('.myShadow1').dropShadow()と書くと、セレクタ'.myShadow1'で検索した要素へドロップシャドウを適用します。

removeShadow()は名前の通り影を削除します。

デフォルトの.dropShadow()メソッドは、color:blackでopacity:0.5の影を、ぼけ具合2でleft:4px,top:4pxの位置につけます。

なお、このサンプルで'.myShadow1'の要素を、position:relativeを指定したdiv要素の中に置いているのは、筆者の環境のIE6でスクロールした時に影の位置がずれるという症状が出たので、正確な場所に追尾させるためです。Drop Shadowは現在位置を取得するのにjquery.dimensions.jsのposition()メソッドを利用しているのですが、これは親要素との位置関係を検出するものなので、正確な位置を把握しやすいように、明示的に親要素で囲んでみたというわけです。もちろん、他にもいくつかの対処方法があり、これでなければいけないというわけではありません。

では、オプションを指定する方法を次ページで試してみましょう。

「Ajaxを使おう」シリーズの記事一覧へ

記事一覧