Web2.0的サイトのロゴって、水面に映ったようなおしゃれなものが多いですが、“アレ”をJavascriptで簡単に実現できます。
GIGAZINEさんのサイトや、designwalkerさんのサイトで紹介されていました。
- Reflection.jsのサイトの下のほうにDownload reflection.jsからファイルをダウンロードして解凍。
- 解凍したファイルの中から、「reflection.js」をサーバにアップロード。
- 画像を表示したいhtmlの<head>から</head>の間に
<script language="JavaScript" type="text/javascript" src="reflection.js"></script>
と書いて、reflection.jsを読み込みます。
- 反射させたい画像(jpg,gif,png)にclass="reflect"を追加する。
<img src="画像ファイル名" class="reflect" />
これで、かっこいい写り込み画像が表示されます。
グラフィックソフトで編集すれば簡単に実現できますが、このスクリプトを使えば都度画像を加工しなくていいので便利ですね。
（マクドナルドのクーポンもこうして反射させるとカッコイイ！(*^_^*)）
目次
■ 関連サイト
- 水面に反射するような効果を画像に加えるJavaScript「Reflection.js」 – GIGAZINE
- CSSとJavaScriptで画像を鏡に反射したようにさせてみる – Designwalker
