通常、画像編集ソフトで画像を加工して作り出すリフレクション効果。これを簡単に実現できるJavaScriptが「Reflection.js」。
公式ページからreflection.jsファイルをダウンロードし、jsフォルダに解凍する。head要素でreflection.jsを呼び出す指定をし、適用したいimg要素にclass属性で「reflect」と市指定する。反射した画像の高さと不透明度の指定は、高さ「rheight20」、不透明度「ropacity80」のように指定。末尾2桁はパーセンテージ指定で、デフォルトでは50%に設定されている。（両方を半角スペース区切りで指定可）
- head要素内にreflection.jsを読み込むソースを記述。
-
<script type="text/javascript" src="js/reflection.js"></script> - 通常のimg要素のソース
-
<img class="reflect" src="images/attention.png" /> - reflection.jsを使用する際のimg要素のソース
-
<img class="reflect rheight20 ropacity80" src="images/attention.png" alt="注意" width="80" height="72" />
すると下記のようにJavaScriptでリフレクション効果を施すことができる。
対応ブラウザ：公式ページではInternet Explorer（以下、IE）5.5、Firefox 1.5、Opera 9 Safariなど主要ブラウザに対応となっている。
