[JS]画像を鏡面反射させるJavascript「reflection.js」
スポンサード
こちらも高さ調整同様、透明度を調整したい画像のクラスに
スポンサード
WEBをやり始めた頃は「画像が鏡面反射する」見せ方がカッコよくて頻繁に使っていたような気がします。。。
最近ではそのようなサイトデザインからもご無沙汰でしたが、とある仕事で久々に必要になったこともあって、画像の鏡面効果を演出できる javascript「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 | <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 ですので、この数値を下げれば透明度が下がり、上げれば元画像の透明度に近づきます。
反射の透明度を変更するデモ
スポンサード
コメント