画像に反射効果を与えるjavascript「Reflection.js」

Web2.0と言われる様になってから多くのサイトで水面に反射させたような画像が使われるようになりました。
Photoshopなどの画像編集ソフトを使用すると簡単に作成できますが、手間もかかります。
Cow's BlogReflection.jsを使用すると簡単に導入することが出来ます。

sponsors

使用方法

Reflection.jsからダウンロードしたreflection.jsをhead内に書き込むだけです。
あとは対象の画像にclass属性としてreflectを付与すればOKです。
またオプションとして反射の高さを変更するrheight、反射の透明度を指定するropacityがあります。
例)<img src="画像URI" class="reflect rheight50 ropacity20">

サンプル

高さの変化(左から順にrheight20、30、40、50、60:ropacityは50)
透明度の変化(左から順にropacity20、30、40、50、60:rheightは50)

sponsors

Javascriptサンプルページ一覧
skuare.net