no-image

JavaScript

マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

Jquery Shadow Pluginはマウスの動作に連動するシャドウエフェクトを実装できるjQueryプラグインです。特定の領域でマウスカーソルを動かすことでそれに合わせてシャドウも動くようになっています。

Jquery Shadow Plugin

Jquery Shadow Plugin

デモでは中央に四角い図形が表示されていて、マウスを動かすことでそれに合わせてシャドウも動きます。例えば、マウスカーソルを右側に持っていくとシャドウは左側に動き、上に持っていくと下に移動する感じです。マウスカーソルとは逆向きに移動するようになっています。

ただシャドウを付けるだけではなく、このようにインタラクティブなアクションを加えることでユーザーも印象に残りやすくなりそうですね。

使い方もシンプルで手軽に実装できるのがいいと思います。

また、オプションにはshadowColor、blur、maxShift、reverseShadow、reverseAxis、overScreen、changeBlur、changeColorといった項目のセッティングが可能です。さらに、changeBlurにはfromCenter、valueOfChangeが、changeColorにはisChange、fromCenter、smoothChange、valuesが用意されています。

マウス動作に連動して動くインタラクティブなシャドウエフェクトを実装したい人は、ぜひ「Jquery Shadow Plugin」を活用されてみてはいかがですか?

no-imageナビゲーションメニューがスライドで表示される「Slide Out Navigation Menu」前のページ

フレキシブルで美しいアニメーションによるファイルアップローダー「FilePond」次のページno-image

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP