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();
        }
      }
    });
  });