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. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  2. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  3. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  4. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  5. PWS Tabs jQuery Plugin
  6. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP