Reflection

2008年2月20日 17:42

最近多くのサイトで水面に反射したような処理を施した画像を多く見かけますが、この「Reflection」はjavascriptで同じような効果を実現します。他にも同じ効果を実現するスクリプトがいくつかありますが、「Reflection」はMITライセンスで提供されているのでご紹介。

サンプル
ノーマル画像
 
設定:rheight50 ropacity90
夜景は結構奇麗な感じに仕上がりますね。
ノーマル画像
 
設定:rheight30 ropacity40
反転画像の透過度を低めに設定してみました。
ノーマル画像
 
設定:rheight20 ropacity75
アマゾンでおなじみの効果です。ノーマルに比べ、雰囲気がぐっとよくなっていませんか?
使用方法

参照元からjavascriptをダウンロード。画像に対してクラス指定するだけで設定可能です。
パラメータは反転画像の高さと透過度の2種類。どちらも0〜100の間で設定します。

参照元

http://cow.neondragon.net/stuff/reflection/