マテリアルデザインでよく見かける波紋エフェクトを実装できる『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

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

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選
スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Updated on
  • Views 1,355