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

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

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

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

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

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

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

公式サイト

必要なファイルは

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

この2つだけです。

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

<link rel="stylesheet" href="css/jquery.rippleria.css">
<script src="js/jquery.rippleria.min.js"></script>

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

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

<script>
    $('#rippleria').rippleria({
        duration: 750,
        easing: 'ease-in'
    });

    $('#rippleria').click(function(e) {
        e.preventDefault();

        var randInt = function (min, max) {
        var rand = min + Math.random() * (max - min)
        rand = Math.round(rand);
        return rand;
    };

    $(this).rippleria('changeColor',
            'rgba('+randInt(0,200)+','+randInt(0,200)+','+randInt(0,200)+',0.'+randInt(3,5));
    });
</script>

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

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

<!-- ボタン -->
	<div class="block tac">
		<button data-rippleria class="btn btn-primary">Click me!</button>
	</div>

	<!-- 画像 -->
	<div class="block tac">
	    <a style="display: inline-block;" id="rippleria" href="#">
	        <img src="http://www.lovethispic.com/uploaded_images/15163-Pretty-Girl.jpg" alt="image">
	    </a>
	</div>

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

デモ画面はこちら

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

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

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

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

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