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. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  2. HR Navigation Responsive Menu
  3. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  4. jQuery Navobile
  5. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP