glossy.js : Javascript : アクア風の立体エフェクトを試してみる。

youmos.comさんで紹介されていたGlossy.jsというJavascriptのエフェクトは、静止イメージを何やら簡単にアクアっぽく立体的にしてくれる。

まずはhttp://www.netzgesta.de/glossy/の画面下にあるDownloadからglossy.js 1.2(2007/6現在)をダウンロードし、適当なところに解凍する。サンプルhtmlとかライセンスに関するテキストか入っているが、glossy.jsだけを自分のディレクトリにアップロードすればよい。
エフェクトをかけられる画像の最小サイズは16×16ピクセルとのことだった。

ちなみにglossy.jsは非商用、個人のみ利用が認められているようなので、注意が必要だ。

無事アップロードができたら、利用したいページの＜head＞～＜/head＞に

＜script type=”text/javascript” src=”http://○○○○/glossy.js”＞＜/script＞

※○○○○はglossy.jsまでのパス。＜＞だけ半角にしてください。

を記述する。これで準備は完了。
あとは＜img=”××××/×××.jpg” class=”glossy”＞のように、利用したイメージにclassを追加するだけ。

class = “glossy iradius50″ とすると何となくアクアっぽい雰囲気に。色々オプションもあるみたいなので、試して見ると面白いかも。

大量にイメージを扱うときに素材を加工しなくて済むのは良いかもしれない。「内部的にはCanvasを利用している」との事ですので、ブラウザ環境には注意が必要との事でした。

○試した元写真