クリック時しずくのようなエフェクトをJavaScriptで付ける

作り方

CSS

.sizuku {
    animation: sizuku 1s linear 0s; /*1s はアニメーションにかかる時間*/
    background-color: #6EB2E0; /*背景色*/
    border-radius: 50%;
    border: 4px solid #6EB2E0; /*ボーダーの幅と色*/
    position: absolute;
    z-index: 1000;
}

@keyframes sizuku {
    0% {
        height: 0; 
        opacity: 1;
        transform: translate(0, 0);
        width: 0;
    }
    100% {
        height: 500px; /*円の高さ幅の最大値*/
        opacity: 0;
        transform: translate(-250px, -250px); /*高さの半分の値にする*/
        width: 500px; /*基本高さと合わせる*/
    }
}

ポイントは、しずくの中心位置を常に真ん中にするために translate でアニメーションさせつつ位置をずらしているところです。透過度もアニメーションで変化させて、徐々に消えるようなエフェクトになっています。

JavaScript

//click イベントで発火
document.body.addEventListener("click", sizuku, false);

function sizuku(e) {

    //座標の取得
    var x = e.pageX;
    var y = e.pageY;

    //しずくになるdivの生成、座標の設定
    var sizuku = document.createElement("div");
    sizuku.style.top = y + "px";
    sizuku.style.left = x + "px";
    document.body.appendChild(sizuku);

    //アニメーションをする className を付ける
    sizuku.className = "sizuku";

    //アニメーションが終わった事を感知してしずくを remove する
    sizuku.addEventListener("animationend", function() {
        this.parentNode.removeChild(this);
    }, false);
}

JavaScript にしてもらってることは基本クリックしたときの座標の取得、設定です。あとはアニメーションが終わったことを発火点にする animationend イベントで、しずくの div 自体を remove しています。消さないと div がクリックするたびに増えてしまうため、一応削除。関数内でイベントを付けているので少しお行儀が悪いですが、これが一番簡単だと思われます。

別バージョン

CSS の背景色の部分を消してしまえば、下図のように輪っか風のエフェクトになります。

CSS

/*背景色は設定しない*/
.sizuku {
    animation: sizuku 1s linear 0s;
    border-radius: 50%;
    border: 4px solid #6EB2E0; 
    position: absolute;
    z-index: 1000;
}

まとめ

昔はちょっとだけ流行ったりした jQuery エフェクト系のギミックですが、最近は見なくなりました。CSS のアニメーションにほぼ押し付けられるので編集も簡単ですし動きも滑らかです。多分。

イベントを付ける部分を body ではなく特定の要素にすれば、その要素だけクリック時しずくイベントを起こすことも出来ます。