reflection.js（反射効果）βブロガーの雑感

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

写真に反射効果をさせる。
小技のjs紹介。

元画像は

白い影をつけることも

やりかた

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

サイト内

ページ下のほう
「Download reflection.js 1.6」
よりダウンロード

解凍したフォルダの中より

「reflection.js」をサーバーにあげます。

そしてHTML内html〜/htmlのどこでも良いので
<script type="text/javascript" src="http://アップロード先/reflection.js"></script>

を挿入します。

写真を上げたら

イメージタグ内に黒なら
class="reflect"
を入れるだけ。

例
<img src="http://beta.meblog.biz/image/imagereflection2.jpg" alt="imagereflection2.jpg" width="480" height="345" class="reflect"/>

白くするには
rheight40 ropacity80
の様な設定を入れる。
rheightは下に反射される部分の高さ。
ropacityは透明感度。

例
<img src="http://beta.meblog.biz/image/imagereflection2.jpg" alt="imagereflection2.jpg" width="480" height="345" class="reflect rheight40 ropacity80"/>

ちょっとおしゃれな感じで写真を見せるのに効果的です。