【JavaScript】波紋(リップル)アニメーションの作成方法

2022年5月9日JavaScript

JavaScriptでクリックしたところから波が発生する波紋(リップル)アニメーションの作成方法を紹介します。

波紋(リップル)アニメーションのデモ

See the Pen
JavaScript – 波紋アニメーション(リップル) by Sosak (@Sosak2021)
on CodePen.

JavaScriptコードの解説

  const container = document.querySelector(".container");

  container.addEventListener("click", (e) => {
    // クリックの場所
    const x = e.clientX;
    const y = e.clientY;
  
    // 親要素の端
    const containerTop = e.target.offsetTop;
    const containerLeft = e.target.offsetLeft;
  
    // 端までの距離
    const inY = y - containerTop;
    const inX = x - containerLeft;
  
    // リップル生成
    const ripple = document.createElement("span");
    ripple.classList.add("ripple");
    ripple.style.top = `${inY}px`;
    ripple.style.left = `${inX}px`;
  
    container.appendChild(ripple);
  
    setTimeout(() => ripple.remove(), 700);
  });
  
  

eventのclientXとclientYでマウスイベントで取得されるカーソル座標パラメータを取得することができます。clientXとclientYでクリックされた場所の特定ができます。
offsetTopとoffsetLeftは、親要素からの相対的な位置を取得することができます。
これらの情報を使うことで、親要素までの距離を算出できます。
そして、createElementで要素を作成して、cssでスタイルを当てたクラスを付与したものを、
appendChildで挿入することで、クリックした場所から広がる波紋を実現できます。
最後に、残すと不要なバグの原因となるのでremove()で削除します。

appendChildの使い方は、JavaScriptのDOM要素の操作方法を参照してみてください。