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

【PR】HP登録でSEO対策！ アクセスアップにコチラ！
【PR】大容量で高機能な仮想専用サーバー

配布元：reulection.js1.7
ライセンス：MIT-license

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;” />

サンプル

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

スポンサードリンク