画像を鏡面加工(imgにclass設定するだけ)/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="reflection.js"></script>
<title>Reflection.js Testsuite</title>
<style type="text/css">
body{margin:0px;}
table tr td{padding-right:4px; vertical-align:top}
div img.reflected{margin-bottom:-30px; z-index:2; position:relative}
</style>
</head>
<body>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="1.jpg" class="reflect" alt="" /></td>
    <td><img src="2.jpg" class="reflect rheight40" alt="" /></td>
  </tr>
</table>

</body>
</html>

	Reflection.js

画像に鏡面効果を与えるJavascript。
imgにclassを設定するだけで実現でき、スクリプトも5KBと軽快。
透過具合もclassで結構繊細に調整できる。

セットアップ
ポイント

ダウンロード

上記タブからダウンロード。
Click→Download the latest version, Reflection.js v2.0.

<head>～</head>

ヘッダーにスクリプトを読み込ませる。
これでセットアップ完了。

実装

基本的にはこの形。<img>にreflectをクラス定義する。
透過の調整は、以下のようにクラスを追加する。

追加クラスの詳細は以下の通り。

反射画像の高さを設定

rheight20～80の間のクラスを設定する。（1単位で刻める）

アルファを設定

ropacity20～80の間のクラスを設定する。（1単位で刻める）

これで鏡面効果を実現することができる。

タグの構造

imgにクラスを設定するだけで実現するスクリプトだが、
ブラウザ上では以下のようにimgタグが書き換えられる。

<div style="width: 300px; height: 242px;" class="rheight20">
  <img style="vertical-align: bottom;" src="example.jpg" class="reflected" alt="">
  <canvas width="300" height="40" style="height: 40px; width: 300px;"></canvas>
</div>

divで囲まれて、canvas部分に鏡面効果が描写されている。
imgにstyleで直接CSSのプロパティを書き込むと、囲っているdivに反映される。
なので、imgにmarginとかborderとか設定したい場合は、「div img.reflected」とでも定義しておく。
ちなみに、border設定すると、鏡面画像とずれるので、その場合は、margin-leftとかでマイナス設定して調整したりもできる。
さらにリアルに「鏡面」を表現するなら、imgタグをmargin-bottomでマイナスにして、鏡面画像を少し食い込ませるのもいいかもしれない。
その場合は、imgにpositionとz-indexの設定を忘れずに。
でないと鏡面画像がかぶってしまう。