Yet Another Ripple Plugin

JavaScript

クリック時に波紋のようなアニメーションエフェクトを実装できるjQueryプラグイン「Yet Another Ripple Plugin」

Yet Another Ripple Pluginは、クリックした時に波紋のようなアニメーションエフェクトを表示させることができるjQueryプラグインです。アニメーションがあることで、ボタンがしっかり押されたことが確認できる上に、何より見た目がとてもオシャレになりますね。

Yet Another Ripple Plugin

デモ

設置されているボタンをクリックすると、そのカーソルの位置を中心に左右へ波紋のようなアニメーションエフェクトが広がっていきます。シンプルですが、さりげない波紋効果がとてもいいアクセントになっていますね。

波紋のカラーやアニメーションの時間は、オプションから調節することもできます。具体的に、カラーは「colors」、アニメーション時間は「duration」から好きな値を指定可能です。

波紋アニメーションをサラッとさりげなく見せたい場合は時間を速めに、一方で優雅な雰囲気を出したい場合には時間を遅めに設定するとよさそうですね。

ちなみに、Yet Another Ripple Pluginは、Googleマテリアルデザインからインスパイアされたとのこと。

ボタンをクリックした時に波紋のようなかっこいいアニメーションエフェクトを実装したいという人は、ぜひ「Yet Another Ripple Plugin」を活用されてみてはいかがでしょうか?

Yet Another Ripple Plugin

関連記事

  1. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

  2. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  3. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

  4. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  5. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  6. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP