[Reflex.js]
http://www.netzgesta.de/reflex/
以前、鏡面効果を与えるスクリプトを紹介しましたが、
今回は鏡面効果＋立体効果を与えるライブラリを使ってみます。
【ダウンロードと設定】
Reflex.js→Downloadから、[reflex.js 1.1]をダウンロード。
（ダウンロードファイル名は[reflex.zip]）
フォルダ内にあるJavaScriptファイル（reflex.js）をHTMLに取り込みます。
<script type="text/javascript" src="xxxx/reflex.js"></script>
今回はこの画像を使用します。美しすぎます。
続、田舎の綺麗① Photo By 南国の風＆kao from Zorg
【基本設定：reflex】
鏡面＋立体効果を出すには、適用したいimgに[reflex]クラスを指定します。
<img src='xxx' class='reflex'/>
指定できる画像の最小サイズは32＊32。
オプションクラスも色々あります。
【画像と影の距離：idistance】
画像と鏡面効果となっている影の距離を設定できます。
idistance[数値]の形式でクラス指定します。（単位はピクセル）
最大100、最小0、デフォルト設定は0となっています。
<img src='xxx' class='reflex idistance20'/>
【影の長さを設定：iheight】
鏡面効果となっている影の高さを設定できます。
iheight[数値]の形式でクラス指定します。（単位はパーセント）
最大100、最小0、デフォルト設定は33となっています。
<img src='xxx' class='reflex iheight70'/>
【立体効果の方向を指定：itiltright・itiltnone・itiltleft】
立体効果の方向を指定しない場合、
「右が奥になる」→「正面」→「左が奥になる」が自動的に繰り返されます。
（上の三枚は方向を指定していないのでデフォルトで別方向となっています。）
方向を決めたい場合は、以下のクラスを指定します。
itiltright：右が奥になる
itiltnone：正面（立体効果なし）
itiltleft：左が奥になる
<img src='xxx' class='reflex itiltleft'/>
次回は残りのオプションクラスについて解析していきます。