reflectionは画像を反転し水面／鏡面に映ったような特殊効果（反射効果）を施すライブラリです。reflectionは以下のサイトからダウンロードすることができます。
reflection.js
使用できるブラウザは、やや限定されます。これはIEではフィルタ効果を利用し、Firefox 1.5やSafari 2ではcanvasタグを利用しているためです。reflectionの使い方は簡単で反射効果を適用したいimgタグにclass="reflect"と指定するだけです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="reflection.js"></script>
</head>
<body>
<h1>reflection : サンプル</h1>
<img src="photo.jpg"
class="reflect">
</body>
</html>
反射する部分の高さも指定することができます。これもclass="reflect"の中にrheight30のように指定します。reflectionではピクセル数では指定できずパーセントでの指定になります。以下のサンプルは画像の高さの20%だけを反射表示します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="reflection.js"></script>
</head>
<body>
<h1>reflection : サンプル</h1>
<img src="photo.jpg"
class="reflect rheight20">
</body>
</html>
高さは100%までということはなく500%や2000%まで指定することができますが、実際に効果が表示されるのは100%までになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="reflection.js"></script>
</head>
<body>
<h1>reflection : サンプル</h1>
<img src="photo.jpg"
class="reflect rheight500">
</body>
</html>
反射する部分の最初の不透明度の設定もできます。これもclass="reflect"内に記述します。不透明度はropacity20のように指定します。ただし、不透明度を5%からにしたい場合にはropacity05のようにします。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="reflection.js"></script>
</head>
<body>
<h1>reflection : サンプル</h1>
<img src="photo.jpg"
class="reflect ropacity20">
</body>
</html>
以下のようにropacity、rhightの両方をまとめて指定することもできます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="reflection.js"></script>
</head>
<body>
<h1>reflection : サンプル</h1>
<img src="photo.jpg"
class="reflect ropacity100 rheight20">
</body>
</html>
[
目次へ]
(2006.8.7)