WEBをやり始めた頃は「画像が鏡面反射する」見せ方がカッコよくて頻繁に使っていたような気がします。。。
最近ではそのようなサイトデザインからもご無沙汰でしたが、とある仕事で久々に必要になったこともあって、画像の鏡面効果を演出できるreflection.jsの使い方をまとめ直しました。
reflection.js のダウンロード
以下のページからreflection.jsのファイルを一式ダウンロードします。reflection.js
reflection.js の設置
ダウンロードしたreflection.jsファイルを<head>内に設置します。|
1 2 3 |
<head> <script tyle="text/javascript" src="./reflection.js"></script> </head> |
reflection.js の使い方と効果の微調整
画像に対してreflectのクラスを指定するだけで鏡面反射させることができます。reflectionで鏡面効果が適用された画像ファイルにはdisplay:blockも同時に適用されますので、複数画像を横に並べる場合は 画像を div などでマークアップしてfloat:leftなども併用します。
|
1 2 3 4 5 6 7 8 9 10 |
<style> .box { float:left } </style> <div class="box"><img src="sample01.jpg" class="reflect" /></div> <div class="box"><img src="sample02.jpg" class="reflect" /></div> <div class="box"><img src="sample03.jpg" class="reflect" /></div> |
こんな感じで、画像が鏡面反射して表示されます。↓
reflection.js の基本的な使い方のデモ
reflection.js による鏡面反射の微調整
reflection.jsによる鏡面効果で、反射の高さ、透明度などを微調整することができます。反射の高さを変更
高さを調整したい画像のクラスにrheight数字を指定します。|
1 2 3 4 5 |
<img src="sample01.jpg" class="reflect rheight20" /> <img src="sample02.jpg" class="reflect rheight40" /> <img src="sample02.jpg" class="reflect rheight60" /> <img src="sample03.jpg" class="reflect rheight80" /> <img src="sample03.jpg" class="reflect rheight100" /> |
デフォルトはrheight50ですので、反射の高さを抑えたい場合は低い数値を、より反射の効いた効果を演出したい場合は高い数値を指定します。
反射の高さを変更するデモ
反射の透明度を変更
今度は反射部分の透明度の調整ですが、こちらも高さ調整同様、透明度を調整したい画像のクラスにropacity数字を指定します。|
1 2 3 4 5 |
<img src="sample01.jpg" class="reflect ropacity20" /> <img src="sample02.jpg" class="reflect ropacity40" /> <img src="sample02.jpg" class="reflect ropacity60" /> <img src="sample03.jpg" class="reflect ropacity80" /> <img src="sample03.jpg" class="reflect ropacity100" /> |
デフォルトはropacity50ですので、この数値を下げれば透明度が下がり、上げれば元画像の透明度に近づきます。
反射の透明度を変更するデモ
コメント