画像に鏡面効果を与えるreflection.js

reulection.jsは画像に鏡面効果を与えるjsライブラリになります。

このライブラリを使用すれば、画像を加工することなく画像の下に鏡に反射したようなエフェクトが追加されます。

設置方法

ダウンロードしたreulection.jsをhead要素などで読み込みます。

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

エフェクトを追加したい画像のclass名にreflectを設置します。

<img src="[画像]" alt="" class="reflect" />

これだけで鏡面効果が与えられます。

サンプル

初期段階で画像が作るのが困難な場合や、背景が設定されている場合はこのライブラリを使えば効率的に作業ができるでしょう。

rheight20~80のクラス名を追加することにより、反射している高さを変更することができます。

<img src="[画像]" alt="" class="reflect rheight20" />
<img src="[画像]" alt="" class="reflect rheight40" />
<img src="[画像]" alt="" class="reflect rheight60" />
<img src="[画像]" alt="" class="reflect rheight80" />

サンプル

ropacity20~80のクラス名を追加することにより、反射している透明度を変更することができます。

<img src="[画像]" alt="" class="reflect ropacity20" />
<img src="[画像]" alt="" class="reflect ropacity40" />
<img src="[画像]" alt="" class="reflect ropacity60" />
<img src="[画像]" alt="" class="reflect ropacity80" />

サンプル

img要素に包含要素としてにdiv要素を追加しているのでfloatやborderなどのスタイルを適用したい場合はimg要素にインライン属性で記述します。

<img src="[画像]" alt="" class="reflect" style="float:right;border: solid 5px white;" />

サンプル

その他にもクリックで透明度を変更できる機能などがあるのですが、ブラウザによっては正常に動作しないものが多いです。

MIT-style licenseで配布されているので自由に使用することができます。

関連エントリー

ロールオーバーを簡単に実装する-Image Rollover Code-
クロスフェードを実装する為のCrossfader
Lightboxを使い画像を拡大表示する。
角丸javascriptライブラリ『curvyCorners』を使ってみる
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ

スポンサードリンク

«半角カナを全角カナに変換するjsライブラリ | メイン | いまWebディレクターの周辺では»