影をマウス位置に追随させられるJavaScript「OKShadow」

要素にドロップショドウをかけることがあるかと思いますが、OKShadowを利用すると、その影をマウス位置に追随させることが可能です。
これにより、3D表現を擬似的に実現させられます。

使用方法

OKShadowからファイルをダウンロード。


<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="okshadow-1.0.js"></script>
<script>
$(function(){
	$('#id名').okshadow();
});
</script>

あとはidを要素に振れば完成です。
<div id="id名">テキストなど</div> また、テキストにもかけることが可能です。


$('#id名').okshadow({
  color: '#555', //影の色
  textShadow: true, //テキストシャドーオン
  transparent: true, //ボカすエフェクトオン
  xMax: 5, //最大のx位置
  yMax: 0, //最大のy位置
  yOffset: 3, //yの位置
  fuzzMin: 1, //最小のブラー
  fuzzMax: 3, //最大きのブラー
});

本家サンプルのLinesとか面白いですね。

サンプル

Javascriptサンプルページ一覧

skuare.net