ボタンの波紋エフェクト (クリック位置を中心に)－CSS・JavaScript

ボタンをクリックした位置を中心に広がる、波紋の効果を付ける方法を解説します。クリック位置の座標をJavaScriptで取得し、波紋アニメーションをCSSで表現します。難しそうな気がしますが理屈は単純なので、実装は簡単です。

デモ

このデモを元に、要点をピックアップして解説します。

ボタン要素のHTML

ボタン要素のHTMLは、自由にマークアップしてOKです。デモではHTMLを簡略化したかったので、疑似要素でテキストを表現しています。

ボタン要素のCSS

ボタン要素の子要素として、波紋要素を挿入します。波紋要素の座標はボタン要素を基準に設定したいので、ボタン要素にposition: relative;を設定しておきます。また、波紋がボタンをはみ出さないように、overflow: hidden;を設定します。

波紋要素のHTML

波紋要素は、JavaScriptで挿入・削除します。

波紋要素のCSS

ボタン要素を基準に座標を設定するために、波紋要素にはposition: absolute;を設定します。幅・高さ・座標についてはJavaScriptで設定しますので、ここでは未設定にしておきます。

波紋要素はborder-radius: 50%;で角を丸めた、ただの円です。円の大きさ・透明度をアニメーションで変化させて、波紋を表現します。

波紋要素を挿入するJavaScript

ボタン要素にイベントリスナを設定し、クリックイベントを取得します。次の行は、波紋要素の直径を求めています。ボタン要素の幅と高さのどちらか大きい方が、波紋要素の直径となります。

const wh = Math.max(el.clientWidth, el.clientHeight);

次の行は半径です。

const half = wh / 2;

次の行は、CSSで設定していなかった波紋要素の位置や大きさを、インラインに挿入しています。

ripple.style = `width:${wh}px;height:${wh}px;left:${e.layerX - half}px;top:${e.layerY - half}px`;

event.layerX・event.layerY

event.layerX・event.layerYは、イベントリスナが設定されている要素の左上を0とした、クリック位置の座標です。この座標をそのまま波紋要素に設定すると、波紋要素の左上がクリック位置になってしまいます。そのため、e.layerX・e.layerYそれぞれの座標から、半径分の長さを引いています。

波紋要素を削除するJavaScript

アニメーションが終了したら波紋要素を削除します。今度は、ボタン要素にanimationendのイベントリスナを設定します。

btn.addEventListener('animationend',(e)=>{
	e.currentTarget.querySelector('.ripple').remove();
});

event.currentTarget

クリックイベントの方ではevent.targetを使用していましたが、これはイベントが発生した要素になります。つまりボタン要素のことです。

event.currentTargetも同じくボタン要素です。ですが、この場合は現在のボタン要素となります。e.currentTargetは、アニメーションが終了した時点のボタン要素です。仮にe.targetとしてしまうと、ブラウザにページが読み込まれたときのボタン要素となります。その時点では子要素に波紋要素はありませんので、波紋要素を削除することもできません。

おわりに

クリック位置が条件となるとJavaScriptが不可欠なので、CSSだけではできません。ですが、普通のクリックアニメーションは、CSSだけでも表現できます。次のページは、CSSのみでアニメーションさせるテクニックを考察したときの記事です。よかったら合わせてご覧ください。