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」を活用されてみてはいかがですか?

関連記事

  1. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  2. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  3. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  4. graphite

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  5. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  6. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP