Ripple effect in Material Design using jQuery and CSS3

Hiệu ứng gợn sóng (ripple effect) xuất hiện 96.69% trong các thiết kế Material Design, nếu bạn sử dụng các thiết bị di động đặc biệt là Android, tinh ý một chút thì có thể thấy hầu hết app đều có hiệu ứng này khi click vào button hoặc đơn giản hơn là chạm vào. Trong bài viết này tôi sẽ giới thiệu cho bạn cách tích hợp và sử dụng nó

Xem demo (click để thấy hiệu ứng)
demo
Trước tiên bạn kiểm tra xem trong template đã có thư viện jQuery chưa, nếu chưa có dán đoạn sau trước thẻ </head>

<script src='https://code.jquery.com/jquery-3.3.1.min.js'/>

Viết CSS

.ripple{position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:inherit;pointer-events:none;animation:ripple-shadow 0.4s forwards;-webkit-animation:ripple-shadow 0.4s forwards}
.rippleWave{backface-visibility:hidden;position:absolute;border-radius:50%;transform:scale(0.7);-webkit-transform:scale(0.7);background:rgba(255,255,255,1);opacity:0.45;animation:ripple 2s forwards;-webkit-animation:ripple 2s forwards}
@keyframes ripple-shadow{0%{box-shadow:0 0 0 rgba(0,0,0,0.0)}20%{box-shadow:0 4px 16px rgba(0,0,0,0.3)}100%{box-shadow:0 0 0 rgba(0,0,0,0.0)}}
@-webkit-keyframes ripple-shadow{0%{box-shadow:0 0 0 rgba(0,0,0,0.0)}20%{box-shadow:0 4px 16px rgba(0,0,0,0.3)}100%{box-shadow:0 0 0 rgba(0,0,0,0.0)}}
@keyframes ripple{to{transform:scale(24);opacity:0}}
@-webkit-keyframes ripple{to{-webkit-transform:scale(24);opacity:0}}

Cuối cùng là 1 đoạn js nhỏ trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
jQuery(function(t){t(document).on("mousedown","[data-ripple]",function(i){var e=t(this);if(!e.is(".btn-disabled")){e.closest("[data-ripple]")&&i.stopPropagation();var o=e.css("position"),s=e.offset(),a=i.pageX-s.left,p=i.pageY-s.top,n=Math.min(this.offsetHeight,this.offsetWidth,100),d=t("<div/>",{class:"ripple",appendTo:e});o&&"static"!==o||e.css({position:"relative"}),t("<div/>",{class:"rippleWave",css:{background:e.data("ripple"),width:n,height:n,left:a-n/2,top:p-n/2},appendTo:d,one:{animationend:function(){d.remove()}}})}})});
//]]></script>

Cách sử dụng cực kì đơn giản, bạn chỉ cần thêm thuộc tính data-ripple vào bất kì tag html nào muốn xuất hiện hiệu ứng. Ví dụ

- Để background mặc định

<button data-ripple="" class="xxx">Ripple Button</button>

- Set background theo mã màu bạn chỉ định

<!-- Use HEX color -->
<a data-ripple="#000000" class="aaa">Ripple in hyperlink</a>

<!-- Use RGB color -->
<a data-ripple="rgba(0,0,0,0.13)" class="uuu">Ripple in hyperlink</a>

<!-- Or use color's name -->
<div data-ripple="green" class="ahihi">Ripple in div</div>

Code này khi tích hợp hoàn toàn không làm ảnh hưởng tới css button, div,... trong template của bạn, cũng như đoạn js không đáng kể nên chẳng có lý do gì mà ta không thêm nó vào trang :))

Good luck !