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


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


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함