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

| コメント(0) | トラックバック(0) |
youmos.comさんで紹介されていたGlossy.jsというJavascriptのエフェクトは、静止イメージを何やら簡単にアクアっぽく立体的にしてくれる。
まずは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を利用している」との事ですので、ブラウザ環境には注意が必要との事でした。

○試した元写真
398525069_220d8d7c03.jpg

○glossy.jsを利用してみると
398525069_220d8d7c03.jpg

youmos.com

http://www.netzgesta.de/glossy/

トラックバック(0)

トラックバックURL: http://www.rapidlymage.com/mt4/mt-tb.cgi/282

コメントする

Recent Blog Entries

Waikiki Parc Hotel : Honolulu : Hawaii (ハワイのホテル)
Xperia (Android) 入れてみた無料アプリのピックアップ。2010/04/26
今更ながらPhotoshopでHDRつくってみた。
Adobe BrowserLabが使えるようになっていた。
SQ28m:トイデジカメをまた買いました。

Recent Study Entries

今更ながらPhotoshopでHDRつくってみた。
Movable Type でグリッドレイアウトをやってみた。(jquery.vgrid.js)
OpenFileCMSが凄い:WEBファイルマネージャーの進化

Recent Memo Entries

unique="1" だった
Google日本語入力をMacに入れてみた。
StageHD v3とVReel Beta

BLOG CATEGORY

ブログ記事 ARCHIVE