クリックした点から波紋が広がるアニメーションをHTML・CSS・JavaScriptで実装!

はじめに

今回は記事一覧レイアウトの各記事をクリックしたときに、クリックした点から黒の円形の波紋が広がるアニメーションを実装したのでご紹介します。

クリックした点から波紋が広がるアニメーションの実際の表示

記事をクリックすると波紋が広がります。リンク先に遷移しないようになっています。

PR

クリックした点から波紋が広がるアニメーションのHTMLの構造

<div class="article__list">
    <article class="article__item">
        <a class="waves-effect" href="">
            <!-- 省略 -->
        </a>
    </article>
    <article class="article__item">
        <a class="waves-effect" href="">
            <!-- 省略 -->
        </a>
    </article>
</div>

クリックする要素に「waves-effect」というクラスを付与しました。

クリックした点から波紋が広がるアニメーションのJavaScript

document.addEventListener("DOMContentLoaded", function () {
    // 説明1
    const wavesEffectElements = document.querySelectorAll(".waves-effect");

    wavesEffectElements.forEach(function (element) {
        // 説明2
        element.addEventListener("mousedown", function (e) {
            // 説明3
            const existingRipples = element.querySelectorAll(".waves-ripple");
            existingRipples.forEach(function (ripple) {
                ripple.remove();
            });
            // 説明4
            const ripple = document.createElement("span");
            ripple.classList.add("waves-ripple");
            element.appendChild(ripple);

            // 説明5
            const rect = element.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            ripple.style.width = ripple.style.height = size + "px";
            ripple.style.left = e.clientX - rect.left - size / 2 + "px";
            ripple.style.top = e.clientY - rect.top - size / 2 + "px";
            ripple.classList.add("is-show");
        });
        // 説明6
        element.addEventListener("mouseup", function () {
            const ripples = element.querySelectorAll(".waves-ripple");
            ripples.forEach(function (ripple) {
                ripple.addEventListener("animationend", function () {
                    ripple.classList.remove("is-show");
                    element.removeChild(ripple);
                });
            });
        });
    });
});

クリックした点から波紋が広がるアニメーションのJavaScriptの説明

クリックした点から波紋が広がるアニメーションのJavaScriptの説明1

「.waves-effect」を持つ要素をすべて取得し変数に代入します。

クリックした点から波紋が広がるアニメーションのJavaScriptの説明2

マウスダウンをした「.waves-effect」に対してイベントリスナーを実行します。

クリックした点から波紋が広がるアニメーションのJavaScriptの説明3

波紋要素「.waves-ripple」が存在していた場合は削除します。

クリックした点から波紋が広がるアニメーションのJavaScriptの説明4

新しい波紋要素(<span>要素)を作成し、それに 「.waves-ripple 」を追加します。

クリックした点から波紋が広がるアニメーションのJavaScriptの説明5

クリックした位置を取得し、波紋要素に「.is-show」を追加しアニメーションを発動します。これでクリックした位置から波紋が広がるようになります。

クリックした点から波紋が広がるアニメーションのJavaScriptの説明6

クリックを放す(マウスアップする)と波紋要素を削除します。

クリックした点から波紋が広がるアニメーションのCSS

波紋に関係する部分のcssのみご紹介します。

.waves-effect {
    position: relative;
    overflow: hidden;
}
.waves-ripple {
    animation: ripple 1s linear;
    position: absolute;
    border-radius: 50%;
    background: rgba(0,0,0,.2);
    background: radial-gradient(rgba(0,0,0,0.2) 0,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.4) 50%,rgba(0,0,0,0.5) 60%,rgba(255,255,255,0) 70%);
    transition: transform,opacity 0.5s ease-out;
    transform: scale(0) translate(0,0);
}
@keyframes ripple {
    to {
        transform: scale(3);
        opacity: 0;
    }
}
.waves-ripple.is-show {
    opacity: 1;
    transform: scale(0);
}
>お問い合わせはこちら

お問い合わせはこちら