youmos.comさんで紹介されていたGlossy.jsというJavascriptのエフェクトは、静止イメージを何やら簡単にアクアっぽく立体的にしてくれる。
まずはhttp://www.netzgesta.de/glossy/の画面下にあるDownloadからglossy.js 1.2(2007/6現在)をダウンロードし、適当なところに解凍する。サンプルhtmlとかライセンスに関するテキストか入っているが、glossy.jsだけを自分のディレクトリにアップロードすればよい。
エフェクトをかけられる画像の最小サイズは16x16ピクセルとのことだった。
ちなみにglossy.jsは非商用、個人のみ利用が認められているようなので、注意が必要だ。
を記述する。これで準備は完了。 あとは＜img="××××/×××.jpg" class="glossy"＞のように、利用したイメージにclassを追加するだけ。
class = "glossy iradius50" とすると何となくアクアっぽい雰囲気に。色々オプションもあるみたいなので、試して見ると面白いかも。
大量にイメージを扱うときに素材を加工しなくて済むのは良いかもしれない。「内部的にはCanvasを利用している」との事ですので、ブラウザ環境には注意が必要との事でした。
まずはhttp://www.netzgesta.de/glossy/の画面下にあるDownloadからglossy.js 1.2(2007/6現在)をダウンロードし、適当なところに解凍する。サンプルhtmlとかライセンスに関するテキストか入っているが、glossy.jsだけを自分のディレクトリにアップロードすればよい。
エフェクトをかけられる画像の最小サイズは16x16ピクセルとのことだった。
ちなみにglossy.jsは非商用、個人のみ利用が認められているようなので、注意が必要だ。
無事アップロードができたら、利用したいページの＜head＞～＜/head＞に
＜script type="text/javascript" src="http://○○○○/glossy.js"＞＜/script＞※○○○○はglossy.jsまでのパス。＜＞だけ半角にしてください。
を記述する。これで準備は完了。 あとは＜img="××××/×××.jpg" class="glossy"＞のように、利用したイメージにclassを追加するだけ。
class = "glossy iradius50" とすると何となくアクアっぽい雰囲気に。色々オプションもあるみたいなので、試して見ると面白いかも。
大量にイメージを扱うときに素材を加工しなくて済むのは良いかもしれない。「内部的にはCanvasを利用している」との事ですので、ブラウザ環境には注意が必要との事でした。
○試した元写真
○glossy.jsを利用してみると
| パーマリンク
