reflectionとは?
reflectionは画像の下側に反射効果を施すだけのシンプルなライブラリです。ただ、使い方のアイデアによっては、面白いこともできます。下の図は、富士山のJPEG画像を読み込んだけのものと、reflection.jsを使って「逆さ富士」を表現したものです。実は「逆さ富士」の方の画像ファイルは、上向きの富士山の画像ファイル1枚だけです。富士山を「逆さ」にしているのが、本稿で解説するreflection.jsというライブラリが果たしている役割ということになります。
 |
 |
reflection.jsを使ったページ |
reflection.jsを使わないページ |
reflectionは他のライブラリを使用しませんが、動作するブラウザは多少限定されます。<canvas>タグが利用できるブラウザかInternet Explorerでないとreflectionは動作しません。ただ、表示効果が反映されないだけで特にエラーが発生するわけではありません。reflectionでサポートしている動作ブラウザは以下のようになっています。
| reflection.jsをサポートする主なブラウザ |
|---|
| Internet Explorer 5.5以降 |
| Firefox 1.5以降 |
| Safari 2以降 |
| Opera 9以降 |
reflectionはこのページからダウンロードすることができます(*1)。
 |
 |
reflection.jsの配布サイト。反射例などの見本も提示されている |
下の方に行くとダウンロードへのリンクがある |
「Download reflection.js 1.6.」の文字をクリックするとダウンロードが行われます。ダウンロードされたファイル(reflection.zip)はZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。
ダウンロードされた圧縮ファイルの展開図 |
ここで必要になるファイルはreflection.jsファイルだけです。他のファイルは説明やサンプル用になっています。実際にreflectionを使用する場合はreflection.jsファイルを任意のフォルダに入れて使用します。
*1ここではreflectionのバージョン1.6(2007年6月25日時点の最新版)で説明しています。
