script.aculo.usで鏡面効果をイメージに適用する （script.aculo.us Reflector）

2007年7月23日(月) 09:10

script.aculo.us Reflector
画像イメージに鏡面効果を適用する方法を紹介しているのが、script.aculo.us Reflector。prototype.jsとscriptaculous.jsを利用して非常に短いJavaScriptコードを記述するだけで実現できる。prototype.jsをすでに導入している場合、非常に便利。

Reflectorで鏡面効果
鏡面効果を適用する<img>タグにid=を割り当て、下記のようにJavaScript指定するだけでよい。オプション指定も可能になっている。

<img src="wollzelle.jpg" alt="test" id="sample" />
<script type="text/javascript">
   Reflector.reflect('sample');
   //Reflector.reflect('sample',{ amount:1/2, opacity:3/4 });
</script>

Reflector JavaScriptコード
HTMLヘッダでprototype.jsとscriptaculous.jsを事前に呼び出しておき、下記のコードで鏡面効果処理を実装する。

<script type="text/javascript">
var Reflector = {
  reflect: function(element) {
    element = $(element);
    options = $H({
      amount: 1/3,
      opacity: 1/3
    }).merge(arguments[1] || {});
   
    var p = element.parentNode, n = element.nextSibling;
    var d = 1.0/(element.height*options.amount);
     
    (element.height*options.amount).times( function(line) {
      var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
        [Builder.node('img',{src:element.src,
          style:'margin-top:-'+(element.height-line-1)+'px'
        })]);
      p.insertBefore(h,n);
      $(h).setOpacity((1-d*line)*options.opacity);
    });
  }
};
</script>

簡単に鏡面効果を実装することが出来るので、非常に便利ですね。外部ファイル形式で実装しておけば、簡単に利用することも出来ます。class="reflect"で鏡面効果が適用されるように、コード修正すればさらに便利になるので、試してみてください。

関連する記事