• RSS
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WEBをやり始めた頃は「画像が鏡面反射する」見せ方がカッコよくて頻繁に使っていたような気がします。。。

最近ではそのようなサイトデザインからもご無沙汰でしたが、とある仕事で久々に必要になったこともあって、画像の鏡面効果を演出できる javascript「reflection.js」の使い方をまとめ直しました。

reflection.js のダウンロード

以下のページから reflection.js のファイルを一式ダウンロードします。


reflection.js の設置

ダウンロードした reflection.js ファイルを <head> 内に設置します。



reflection.js の使い方と効果の微調整

画像に対して reflect のクラスを指定するだけで鏡面反射させることができます。

reflection で鏡面効果が適用された画像ファイルには display:block も同時に適用されますので、複数画像を横に並べる場合は 画像を div などでマークアップして float:left なども併用します。

こんな感じで、画像が鏡面反射して表示されます。↓
reflection.js の基本的な使い方のデモ


reflection.js による鏡面反射の微調整

reflection.js による鏡面効果で、反射の高さ、透明度などを微調整することができます。

反射の高さを変更

高さを調整したい画像のクラスに rheight数字 を指定します。

デフォルトは rheight50 ですので、反射の高さを抑えたい場合は低い数値を、より反射の効いた効果を演出したい場合は高い数値を指定します。
反射の高さを変更するデモ


反射の透明度を変更

今度は反射部分の透明度の調整ですが、
こちらも高さ調整同様、透明度を調整したい画像のクラスに ropacity数字 を指定します。

デフォルトは ropacity50 ですので、この数値を下げれば透明度が下がり、上げれば元画像の透明度に近づきます。
反射の透明度を変更するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください