【ハウツー】

ゼロからはじめるreflection - ブログではじめる逆さ富士!?

1 reflectionとは?

 
  • <<
  • <

1/9

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

1/9

インデックス

目次
(1) reflectionとは?
(2) reflectionを使う
(3) 反射の高さを指定する
(4) 反射の不透明度を指定する
(5) 高さと不透明度を同時に指定する
(6) reflection.jsをブログで使ってみる
(7) プログラムから制御する
(8) 反射効果の削除
(9) タイマーとの組み合わせ

もっと見る

人気記事

一覧

新着記事