jquery.rippleria.jsを使ってクリックするとおしゃれな波紋が広がるエフェクトを表示する方法 DAD UNION

jquery.rippleria.jsを使ってボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示する方法をご紹介します。

Contents

jquery.rippleria.jsを使ってボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示するCSS記述
ボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示するHTML記述
jquery.rippleria.jsを使ってクリックするとおしゃれな波紋が広がるエフェクトを表示するJavaScriptの記述
jquery.rippleria.jsを使ってボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示するデモページ
ソース元：jQuery Rippleria

jquery.rippleria.jsを使ってボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示するCSS記述

※jquery.rippleria.min.cssファイルを読み込みます。ボタン（.btn）と画像エリア（aタグ）のCSS記述です。

<link rel="stylesheet" href="jquery.rippleria.min.css">
<style>
body {
  font-size: 14px;
  text-align: center;
  line-height: 2em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  padding: 15px 0 30px 0;
}
.btn {
    display: inline-block;
    margin: 0 5px 40px 5px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 30px 90px;
    text-transform: uppercase;
}
a{
  display: inline-block;
}
</style>

ボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示するHTML記述

※ボタンまたは画像をクリックすると波紋エフェクトを表示する、ボタンエリア（buttonタグ）と画像エリア（id=”rippleria”）に画像を用意します。buttonタグにdata-rippleriaを追記し、その他波紋をカスタマイズしたい場合は「色：data-rippleria-color」「波紋の間隔：data-rippleria-duration」「イージング：data-rippleria-easing」を設定します。

<h1>ボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示します。<br>以下のボタンまたは画像をクリックしてみて下さい。</h1>

<button data-rippleria class="btn btn-primary">ダークボタン</button>
<button data-rippleria class="btn btn-default">ライトボタン</button>
<button data-rippleria
data-rippleria-color="rgba(100,178,53,.35)"
data-rippleria-duration="1000"
data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)"
class="btn btn-default">カスタマイズボタン</button>

<a id="rippleria" href="#"><img src="1.jpg" alt="image"></a>

jquery.rippleria.jsを使ってクリックするとおしゃれな波紋が広がるエフェクトを表示するJavaScriptの記述

※jquery-2.1.4.min.jsとjquery.rippleria.min.jsファイルを読み込みます。画像（#rippleria）クリック後の波紋のエフェクトは$(‘画像エリア’).rippleria({オプション})を記述します。オプションでは「波紋の間隔：duration」「イージング：easing」等が設定できます。必要に応じて変更してみて下さい。

<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.rippleria.min.js"></script>
<script>
    $('#rippleria').rippleria({
        // aniamtion speed
        duration: 750,
        // custom easing effect
        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>