波紋のエフェクトを実装する「jQuery Rippleria」

新年1回目のウェブラボ技術メモです。

正月休みはいかがお過ごしだったでしょうか。

今年は姪っ子へのお年玉のあげ方を悩みすぎたお正月でした。
悩んで悩んだ結果、結局いつもの宝探し形式です。

あけましておめでとうございます。

さて、今回はマテリアルデザインでよく見かける、波紋のエフェクトをjqueryプラグイン「jQuery Rippleria」を使用して実装してみたいと思います。

早速下記公式サイトからファイルを落とします。

公式サイト

必要なファイルは

jquery.rippleria.min.js
jquery.rippleria.css

この2つだけです。

まずはこれを読み込ませます。

続いて、下記のようにスクリプトを記述します。

注意したいのは、この記述はbodyの閉じタグ前に記述しないと正常に動きません。

後はHTMLでボタンや画像を記述します。

今回は両方サンプルを用意しました。

それでは出来上がったデモ画面をご覧ください。

デモ画面はこちら

対応ブラウザはFirefox, Chrome, IE10+, Opera, Safariとなっており

念のため、IE9以下でも確認しましたがビタイチ動きません。

ただ、表示が崩れたり、挙動がおかしくなるという事はありませんので

IE9以下は気にしないという事であれば普通に使って問題ありません。

以上、ウェブラボ技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。