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를 추가하면 됩니다.
