目次
はじめに
今回は記事一覧レイアウトの各記事をクリックしたときに、クリックした点から黒の円形の波紋が広がるアニメーションを実装したのでご紹介します。
クリックした点から波紋が広がるアニメーションの実際の表示
記事をクリックすると波紋が広がります。リンク先に遷移しないようになっています。
PR

カテゴリー01
カテゴリー02
タイトルタイトルタイトルタイトルタイトルタイトル
2023.00.00
詳しく見る

カテゴリー01
カテゴリー02
タイトルタイトルタイトルタイトルタイトルタイトル
2023.00.00
詳しく見る
クリックした点から波紋が広がるアニメーションの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);
}