Movable Type 備忘録

 reflection.js

  • Jul122006
  • Vote:
    http://bizcaz.com/archives/2006/07/12-215940.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

先日、画像処理で分からないことあってググっていたら、いいかんじのツールを偶然見つけてしまいました。

こちらのreflection.jsでは、JSを使って、オリジナルの画像を水面に映りこんだようなイメージに自動的に表示してくれます。 これをフォトショなどの画像ソフトでやろうと思ったら…どうやってやるんだろ…少なくともわたしには作れません。

でも、このJSを使えばカンタンに以下のようなイメージが表示できます。

使い方はカンタンで、まず上記サムネイルをクリックしてreflection.zipファイルをダウンロードします。 ダウンロードしたら、各自の環境に合わせてreflection.jsをアップロードします。

次に以下のコードを<head>～</head>の間に追加します。

  1. <script type="text/javascript" src="<$MTBlogURL$>reflection.js"></script>

青い字の部分を各自の環境に合わせて変更します。 前準備はこれだけで、後は表示するイメージにclass="reflect"を付け加えるだけで、上記のようなイメージにしてくれます。

  1. <img src="http://●●●.com/image/image.png" width="253" height="26" class="reflect" />

また、反射した映りこみ具合の調整も可能で、例えば映りこみの高さを80%としたい場合には、以下のようにします。

  1. <img src="http://●●●.com/image/image.png" width="253" height="26" class="reflect rheight80" />

青い字の部分で、高さをパーセント指定します。
また、透明度も同じ要領で以下のように指定します。

  1. <img src="http://●●●.com/image/image.png" width="253" height="26" class="reflect ropacity100" />

上記例では、透明度100%を指定しています。
こちらからオンラインで確認することもできます。

いろいろ使えそうなので、試してみてください。
SEE YOU♪

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by きくみ @ November 25, 2006 [REPLY]
user-pic

reflectを入れてみたのですが、本体画像と鏡面画像の間が開いてしまします。
間が空けない様にしたいのですが、お知恵をお借りしたいです。
宜しくお願いします。

 
#2: Posted by bzbell @ November 25, 2006 [REPLY]
user-pic

>>1 きくみ さん

はじめまして^^

ご質問の件ですが、本体と鏡面の間を調整することはできないです。

本体画像の下の方に余分なスペースが入ってませんか?

カンタンにいうと、画像の下側がピッタリ下にくっついていれば、ピッタリ鏡面画像が表示されます。でも、画像が上の方に位置していると、鏡面なので見た目的には本体と鏡面の間は開いてしまうと思います。

なので、画像を加工して間が空かないようしてみてはどうでしょう（￣∇￣)b

参考までに、できあがった画像をこちらのページでブラウザから出来上がりを見ることができます。

 

 Post a Comment

 

コメント用フィード