taketiyo.log

Web Engineering 🛠 & Body Building 💪

【CSS】波紋が広がるボタンアニメーションを作成する【Javascript】

Programming

  /

波紋が広がるようなボタンエフェクト（リップルアニメーション）を実装する手順です。CSS、Javascriptを用いて実装します。
　

目次

　

達成出来ること

  • 波紋エフェクト（リップルアニメーション）ボタンを作成する

　

ボタンの作成

まずは適当にボタンを作成します。

<!-- html -->

<button class="btn">波紋エフェクト</button>

/* css */

.btn { 
  border: none; 
  user-select: none; 
  outline: none; 
  padding: 10px 25px; 
  color: #ffffff; 
  background: #4fc3f7; 
  text-align: center; 
}

　
このような感じになります。

　

アニメーション用CSSの作成

CSSに下記の定義を追加します。

/* css */

.ripple { 
  position: relative; 
  overflow: hidden; 
} 

.ripple .ripple-active { 
  position: absolute; 
  pointer-events: none; 
  background: #FFF; 
  border-radius: 50%; 
  transform: scale(0); 
  animation: ripple .8s; 
  opacity: .3; 
}

@keyframes ripple { 
  to { 
    opacity: 0; 
    transform: scale(2.0); 
  } 
}

　

アニメーション用Javascriptの作成

下記のJavascriptを作成します。

// javascript

(() => { 

  const rippleEffect = (event) => { 

    let target = event.target; 

    if (!target) { 
      return; 
    } 

    const cover = document.createElement('span'); 
    const coverSize = target.offsetWidth; 
    const loc = target.getBoundingClientRect(); 

    const x = event.pageX - loc.left - window.pageXOffset - (coverSize / 2); 
    const y = event.pageY - loc.top - window.pageYOffset - (coverSize / 2); 

    const pos = `top: ${y}px; left: ${x}px; height: ${coverSize}px; width: ${coverSize}px;`; 

    target.appendChild(cover); 
    cover.setAttribute('style', pos); 
    cover.setAttribute('class', 'ripple-active'); 

    setTimeout(() => { 
      cover.remove(); 
    }, 2000); 
  }; 

  document.addEventListener('DOMContentLoaded', () => { 
    Array.from(document.querySelectorAll('.ripple')).forEach((elem) => { 
      elem.addEventListener('click', rippleEffect) 
    }); 
  }); 

})();

　
このスクリプトはDOMの構築が終了した時点で発火しますが、構築後動的に追加される要素（button.ripple）に対しては影響出来ないため、必要に応じてカスタマイズが必要です。
　

ボタンに対してアニメーション用のクラスを設定

最初に準備したボタン要素に.rippleクラスを追加します。

<!-- html -->

<button class="btn ripple">波紋エフェクト</button>

　

デモ

最終的にこうなります。

　

参考

波紋の色を変更したい場合は、.ripple-activeのbackgroundを変更すればOKです。

/* css */

.ripple.ripple-dark .ripple-active { 
  background: #000; 
}

<!-- html -->

<button class="btn ripple ripple-dark">波紋エフェクト</button>

　
結果