HOME > >

Reflection.js

Reflection.jsとは?

水面に反射するような効果を画像に加えるJavaScriptです。ブラウザ独自拡張のフィルタではないのでどのブラウザでも安心。とはいえ全てのブラウザでOKってわけではないですが・・・

対応ブラウザ

Internet Explorer 5.5〜, Mozilla Firefox 1.5〜, Opera 9〜 Safari

Reflection.js関連サイト

ダウンロードサイト
http://cow.neondragon.net/
解説サイト
http://gigazine.net/

利用方法

  1. <head>〜<head>内に<script type="text/javascript" src="reflection.js"></script>を記述
  2. img要素にclass="reflect"を記述
  3. 反射した画像の高さ指定はimg要素にclass="rheight**"を記述。**は2桁の数値を入れ**%となる。
  4. 反射した画像の不透明度の指定はimg要素にclass="ropacity**"を記述。**は2桁の数値を入れ**%となる。
  5. 反射した画像の高さと不透明度の指定はimg要素にclass="rheght** ropacity**"と半角スペース区切りで記述。

Reflection.js サンプル

class"reflect"

class="reflect rheight50"

class="reflect ropacity90"

class="reflect rheight90 ropacity80"