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

2017.01.25　Posted by Coding_team

Webプログラミング

新年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>

1 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>

$('#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>