画像をに手軽に反射させる『reflection.js』

Ajaxにはまっているのでご紹介。

随分前に出たreflection.jsですが、試してみると思ったより簡単だったので実装してみました。

■headの内容は↓

<script type="text/javascript" src="reflection.js"></script>

■HTMLの内容は↓

<img src="reflection.jpg" alt="reflect" class="reflect rheight20 ropacity50" />

以上ですね。

headでreflection.jsを読み込んで、imgタグにclass="reflect"と設定するだけです。

rheight20、ropacity50はどちらもオプションで、

rheight20　　→　反射の高さを20%に設定
ropacity50　 →　反射の不透明度を50%に設定

簡単ですね。

ただなぜかMovableTypeでは実装できなかったので、別ページで作っています。
ソースはこちらからご覧ください。不明だ。。

» reflection.jsの配布サイトはこちら