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

NO IMAGEテキストコンテンツをページ分割(ページネーション)できる「jPaginate」前のページ

グリッチ効果を付けれるjQueryプラグイン「mgGlitch」次のページmgGlitch

関連記事

  1. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  2. Bootstrap Photo Gallery jQuery plugin
  3. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  4. jQuery Quick Modal
  5. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

  6. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP