WEBページ上で画像を立体的に表現する場合など、
画像の下に鏡を置いたような反射効果を付けた画像を作成することはよくありますが、
そんなエフェクト効果をJavaScriptで表現できてしまう「Reflection.js」が使えそう。

Reflection_js.jpg
Reflection.js

使用方法はいたって簡単。
上記サイトにある「reflection.js」をHTMLソース上から読み込んで、
エフェクトを掛けたい画像に「class=”reflect”」とクラスの追加をするだけ。

実際に試してみるとこうなります。(背景色が黒の場合と白の場合)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

どんな背景にも対応していて、
わざわざ反射している画像を作成する必要はなくなりそうです。

「reflection.js」内を編集することで、
透過距離と透過度の変更が可能。

対応ブラウザは
・Internet Explorer 5.5 以上
・Mozilla Firefox 1.5 以上
・Opera 9 以上
・Safari 2 以上

是非お試しあれ。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

画像に鏡面エフェクトを自動で加える「Reflection.js」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner