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. Vimeo Carousel Gallery
  2. flexible-bootstrap-carousel
  3. cascadingDivs
  4. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  5. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  6. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP