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

影をマウス位置に追随させられる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「OKShadow」サンプル

sponsors

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

記事作成:
記事URL:

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