非常に簡単に、下記のような反射効果のついた画像をつくる事ができます。
必要なjsファイルを１つ読み込んで、imgタグに「class="reflect"」と設定するだけ、という簡単さです。
【『reflection.js』をつかって画像に反射効果をつけたサンプルページはこちら】
【手順１】『reflection.js』をダウンロード
こちらのサイト
http://cow.neondragon.net/stuff/reflection/
から『reflection.js』をダウンロードしてください。（英語サイトです）
＊2011年現在の状態だと「Download the latest version, Reflection.js v2.0.」と書かれたところをクリックすれば、ダウンロードできます。
ダウンロードすると、色々なファイルがはいってますが、基本的に必要なのは『reflection.js』のみですから、それだけ取り出してください。
【手順２】あたなのつくるページにファイルをいれて、HTMLから読み込む
あなたの作成するページのフォルダに『reflection.js』をいれて、
HTMLのヘッダーに『reflection.js』を読み込む
---------------------
<scripttype="text/javascript" src="階層を記述してね/reflection.js"></script>
---------------------
を記載してください。
そして、反射効果を出したい画像の「imgタグ」に「class="reflect"」と記述してください。
例えば下記のような感じです
---------------------
<imgsrc="photo/001.jpg" class="reflect" >
---------------------
以上で、画像が反射されるはずです。
反射の長さをカスタマイズしたい場合
サンプルにあるように
反射させる画像の長さを調整する事ができます。
サンプルのHTMLをみてもらうと解ると思いますが「class」に「rheight」という記述がありますよね。
そして、その後ろに数字がついています。「rheight10」とか。
---------------------
<imgsrc="photo/001.jpg" class="reflect rheight10" >
<img src="photo/002.jpg" class="reflect rheight50" > <img src="photo/003.jpg" class="reflect rheight100" >
---------------------
この「rheight」後ろの数字が、縦の長さを表していますので、数字が大きい方が長くなり、数字が小さいと短くなります。
こちらで反射の長さを調整することができます。
フォトショップなどでいちいち反射をつくるのがめんどうな場合は、とても便利な代物ですね。
