Ripple Effect

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

詳しい導入事例は導入方法を参照してください。

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

DEMO
色指定

使い方

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

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

HTML
Script

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