material design button with ripple click effect

머티리얼 디자인에서 버튼을 클릭하면 잉크가 퍼지는듯한 효과를 따라하고 싶어서 찾아봤습니다.

Ref : http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

원작자의 것은 여러번 클릭해도 잉크가 하나만 나타났는데, 저는 여러번 클릭하는대로 잉크효과가 나타나도록 수정해봤습니다.

적용방법

CSS

/*ink effect*/

.ripplelink{

  display:block;

  position: relative;

  overflow: hidden;

  text-align:center;

  -webkit-transition: all 0.2s ease;

  -moz-transition: all 0.2s ease;

  -o-transition: all 0.2s ease;

  transition: all 0.2s ease;

  z-index:0;

}

.ripplelink:hover{

  z-index:1000;

  box-shadow:rgba(0, 0, 0, 0.3) 3px 3px 16px 3px;

  -webkit-box-shadow:rgba(0, 0, 0, 0.3) 3px 3px 16px 3px;

  -moz-box-shadow:rgba(0, 0, 0, 0.3) 3px 3px 16px 3px;

}

.ink {

  display: block;

  position: absolute;

  background:rgba(255, 255, 255, 0.5);

  border-radius: 100%;

  -webkit-transform:scale(0);

  -moz-transform:scale(0);

  -o-transform:scale(0);

  transform:scale(0);

}

.animate {

  -webkit-animation:ripple 0.65s linear;

  -moz-animation:ripple 0.65s linear;

  -ms-animation:ripple 0.65s linear;

  -o-animation:ripple 0.65s linear;

  animation:ripple 0.65s linear;

}

@-webkit-keyframes ripple {

    100% {opacity: 0; -webkit-transform: scale(2.5);}

}

@-moz-keyframes ripple {

    100% {opacity: 0; -moz-transform: scale(2.5);}

}

@-o-keyframes ripple {

    100% {opacity: 0; -o-transform: scale(2.5);}

}

@keyframes ripple {

    100% {opacity: 0; transform: scale(2.5);}

}

javascript (jQuery)

<script>

//ink

$(function(){

  var ink,ink_id, d, x, y;

  ink_id_arr=[];

  $(".ripplelink").click(function(e){

    ink_id="ink"+Math.round(Math.random()*1000);

    ink_id_arr.push(ink_id);

    $(this).prepend("<span class='ink "+ink_id+"'></span>");

    ink = $(this).find("."+ink_id);

    if(!ink.height() && !ink.width()){

      d = Math.max($(this).outerWidth(), $(this).outerHeight());

      ink.css({height: d, width: d});

    }

    x = e.pageX - $(this).offset().left - ink.width()/2;

    y = e.pageY - $(this).offset().top - ink.height()/2;

    ink.css({top: y+'px', left: x+'px'}).addClass("animate");

    window.setTimeout('$("."+ink_id_arr[0]).remove();ink_id_arr.shift();',900);

  });

});

</script>

HTML (예시)

<button class=" testbutton ripplelink">미리보기</button>

class에 ripplelink를 추가하면 됩니다.