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日時点の最新版)で説明しています。