JavaScriptでボタンにRipple Effectをつける

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、JavaScriptでRipple Effectを実装する方法を学びました。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

Ripple Effect効果は、以下のCSSによって実現しています。

@keyframes」は、CSSのアニメーションを実装する機能です。ボタンをクリックした時に、「.circle」クラスを付与したspan要素を作成して、ボタン状に被せます。その時にこのアニメーションが実行され、波状に広がった後に消えます。

JavaScriptの実装

準備が完了したので、JavaScriptを実装していきましょう。

要素を取得する

画面操作に必要な要素を取得します。

clickイベントを登録

「CLICK ME」ボタンを押下するとエフェクトが実行されるようにclickイベントをつけましょう。

クリックの座標を取得

続いて、エフェクトの開始位置を決めるための座標を取得します。

client.X」及び「client.Y」は、マウスイベント発生時のX軸方向Y軸方向の位置を取得できます。これで、どこからエフェクトを発生させるかを制御できます。

デモでボタンを複数箇所クリックするとそこからエフェクトが始まることがわかると思います。

エフェクト発生場所の計算

次は、エフェクト発生場所の計算をします。

e.target.offsetTop」及び「e.target.offsetLeft」にて、ボタン要素のView上の位置を取得できます。

そこから先ほど取得したクリック位置を差し引いて、「ボタン要素のどの位置をクリックしたか」を計算しています。

Ripple Effect要素を作成

最後に、Ripple Effecgt要素を作成して完了です。

おわりに

ボタンエフェクトも面白いですね。今回もCSSの知識が必要ですけど^^;

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す