Ripple Effect

MUIのクリック時のエフェクトを真似したもの

CSSに関しては一部CSSライブラリを採用しているので併用してください。

クリックしたボタンに波紋のエフェクトをかけます。

DEMO
色指定

使い方

エフェクトをかける対象に[data-ripple]の属性を追加するだけ。
波紋の色は[data-ripple]属性が空の場合は半透明の白ですが、カラーコードを入れることで色を指定できます。

他のクリックイベントと競合して遅れて表示される場合があります。

HTML
CSS
Script

.ripple {
    position: absolute;
    top:0; left:0; bottom:0; right:0;
    overflow: hidden;
    transform: translateZ(0);
    border-radius: inherit;
    pointer-events: none;
  }
  .rippleWave {
    backface-visibility: hidden;
    position: absolute;
    border-radius: var(--radius-circle);
    transform: scale(0.7);
    background: rgba(255,255,255, .5);
    opacity: 0.45;
    animation: ripple 1s forwards;
  }
  @keyframes ripple {
    to {transform: scale(24); opacity:0;}
  }

$bd.on('click', '[data-ripple]', function(e){
    let t = $(this);
    
    if(t.is('.btn-disabled')) {return;}
    if(t.closest('[data-ripple]')) {e.stopPropagation();}
  
    let initPos = t.css('position'),
      offs = t.offset(),
      x = e.pageX - offs.left,
      y = e.pageY - offs.top,
      dia = Math.min(this.offsetHeight, this.offsetWidth, 100),
      $ripple = $('<div/>', {class : 'ripple',appendTo : t });
    
    if(!initPos || initPos==='static') {
      t.css({position:'relative'});
    }
    
    $('<div/>', {
      class : 'rippleWave',
      css : {
        background: t.data('ripple'),
        width: dia,
        height: dia,
        left: x - (dia/2),
        top: y - (dia/2),
      },
      appendTo : $ripple,
      one : {
        animationend : function(){
          $ripple.remove();
        }
      }
    });
  });