マテリアルデザインでよく見かける波紋エフェクトを実装できる『jQuery Rippleria』

マテリアルデザインでよく見かける波紋エフェクトを実装できる『jQuery Rippleria』
jQuery Rippleria

jQuery Rippleriaは、マテリアルデザインでよく見かける、ボタンやオブジェクトを押した際の波紋エフェクトを実装できるjQueryプラグインです。

まずは、こちらのサンプルページをご覧ください。

水滴が落ちて、波紋が広がっていくようなエフェクトです。

ボタンに波紋エフェクト

画像に実装することもできます。こちらは、ホバーカラーをランダムで変更しています。

画像に波紋エフェクト

スポンサーリンク

使い方

サンプルページに実装してみました。

ダウンロードページ上部にある「DONWLOAD.ZIP」からソースコードをダウンロードします。

ダウンロード

ZIPファイルを展開したら、cssフォルダに入っている「jquery.rippleria.min.css」と、jsフォルダに入っている「jquery.rippleria.min.js」を使います。

CSS

jquery.rippleria.min.cssを読み込みます。

buttonのスタイルを用意します。

JS

jQueryとjquery.rippleria.min.jsを読み込みます。

画像用のスクリプトです。</body>閉じタグより前で、スクリプトを実行します。ホバーカラーをランダムで変更しています。

HTML

以上で、実装は完了です。

スポンサーリンク
jQuery Rippleria – マテリアルデザインでよく見かける波紋エフェクトを実装できる

人気の記事

コメントを投稿する

  • Posted on 2016.06.07
  • Views 1,242