Top

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

マウスをクリックしたときに雨のしずくが落ちたようなエフェクトを JavaScript で付けてみます。

CSS のアニメーションに大体のことを押し付けているので、動きも軽めです。その代り古いブラウザには対応できていない感じになります。現在このページでそのエフェクトを付けてますのでマウスクリックをしてみてください。

rain-drop

作り方

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", drop, false);

function drop(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 ではなく特定の要素にすれば、その要素だけクリック時しずくイベントを起こすことも出来ます。