[JS]ふんわりとした美しい影をエレメントに与えるスクリプト -Real Shadow

エレメントにリアルな美しい影・シャドウを与えるjQueryのプラグインを紹介します。

Real Shadow -jQuery Plugin that casts photorealistic shadows
Real Shadow -GitHub

[ad#ad-2]

• Real Shadowのデモ
• Real Shadowの使い方

Real Shadowのデモ

デモはChrome, Safariでご覧ください。

デモページ

[ad#ad-2]

マウスの位置を変えると、それを光源としてアニメーションでシャドウが変化します。
※アニメーション無しも設定できます。

エレメントの上だとシャドウは短く

マウスを上に動かすとシャドウが長くなります

Real Shadowの使い方

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="realshadow.js"></script>

JavaScript

jQueryのセレクタで、シャドウを適用するエレメントを指定します。

<script type="text/javascript">
$(selector).realshadow();
</script>

スクリプトのオプション

オプションでは、マウスの追従、光源の位置、シャドウの色を設定できます。

<script type="text/javascript">
$(selector).realshadow({

    followMouse: false,   // true by default

    pageX:       x,       // x coordinate of the light source
    pageY:       y        // y coordinate of the light source

    c: {                  // shadow color
        r: 1,             // red   channel for shadow
        g: 1,             // green channel for shadow
        b: 1,             // blue  channel for shadow
    }

});
</script>

シャドウの色はRGBで調整できます。