この画像とか、「おでのiTunes」のレビューページや、各ページの右カラムの上部で表示させている、CD等のジャケット画像を鏡面反射のように見せているんだけど、これはいちいち画像を加工してるんじゃなくて、Javascriptで行っています。レビューページでは傾きを加えて、iTunesのCover Flowのように見せてるんだけど、当初は全て正面のみで表示させていた。

スクリプト自体、当初は「Reflection.js」を使わせてもらっていたんだけど、偶然これのさらに強化版？の傾きとかも設定できる「reflex.js」を発見！！！即試してみたくなってダウンロード。基本的にreflex.jsを読み込ませ、該当の画像のimgタグにclassを付け加えるだけという非常に簡単×2。傾きの方向や距離、反射の強さとか、透明度もclassで指定するだけ。

<img src="画像のパス" class="reflex itiltleft idistance4 iopacity50" />

問題が1点。画像形式でPNG24（透過）に問題がある。正面向いた場合は問題ないんだけど、傾きを加えた場合のPNG画像で、透明部分があるとえらいことに…。サーモグラフのようなグラフィカルなRGBカラーがランダムに現れて、透明にぬけてくれない。背景に半透明の色を加えたり、PNG8にしても同じだった。これは、Safariに限らず、どのブラウザでみても同じ結果だった。。。解決策は現時点ではないようなので、仕方なく透明部分があるジャケット画像の時は、傾けないことにした。後、この前iPod Touchを見に名古屋栄のApple Storeへ行った際、気になったんで確認してみた。iPod TouchのSafariでは、傾きに関係なくこれに関してはNGだった。為す術なし。よって放置。