Ripple Effect CSS + Javascript

Ripple Effect CSS + Javascript(hiệu ứng dạng sóng) là một hiệu ứng khá đẹp mắt thường được sử dụng trong các thiết kế chuẩn material design của Google. Hôm nay, mình sẽ hướng dẫn các bạn cách tạo effect trên để áp dụng cho các đối tượng trong HTML như button, image, div,…

Bắt đầu nào!

Đầu tiên, chúng ta sẽ tạo một vài đối tượng đơn giản như button và image:

<divid="main"><button>Default</button><button>Primary</button><button>Info</button><button>Danger</button><divstyle="position: relative; background: url('http://images.techtimes.com/data/images/full/83428/iron-man.jpg'); width: 600px; height: 400px; overflow: hidden;"></div></div>

Tiếp theo, ta cần tạo một animation chuyển động như sau:

.ripple {
           position: absolute;
            background: rgba(0, 0, 0, .25);
            border-radius: 100%;
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            pointer-events: none;
        }

        .ripple.show {
            -webkit-animation: ripple .5s ease-out;
            animation: ripple .5s ease-out;
        }

        @-webkit-keyframes ripple {
            to {
                -webkit-transform: scale(1.5);
                transform: scale(1.5);
                opacity: 0;
            }
        }

        @keyframes ripple {
            to {
                -webkit-transform: scale(1.5);
                transform: scale(1.5);
                opacity: 0;
            }
        }

Để animation của thể áp dụng vào từng phẩn tử HTML trên chúng ta cần viết thêm một đoạn script ngắn nữa để khi click vào các phần tử đó hiệu ứng sẽ xuất hiện. Đoạn javascript như sau:

<script type="text/javascript">

var addRippleEffect = function (e) {
        var target = e.target;
        //if (target.tagName.toLowerCase() !== 'button') return false;var rect = target.getBoundingClientRect();
        var ripple = target.querySelector('.ripple');
        if (!ripple) {
            ripple = document.createElement('span');
            ripple.className = 'ripple';
            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
            target.appendChild(ripple);
        }
        ripple.classList.remove('show');
        var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
        var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
        ripple.style.top = top + 'px';
        ripple.style.left = left + 'px';
        ripple.classList.add('show');
        returnfalse;
    }

    document.addEventListener('click', addRippleEffect, false);

</script>

Giải thích

addRippleEffect() là function sẽ áp dụng class ripple và tính toán vị trí click chuột của chúng ta trên đối tượng để tạo hiệu ứng sóng.

Kết luận

Hiệu ứng ripple tạo thật dễ dàng phải không nào. Cảm ơn các bạn đã đọc bài và hãy theo dõi những bài viết bổ ích khác của BlogIT.vn nhé. Mọi thắc mắc hãy để lại comment để chúng tôi có thể giúp đỡ bạn. Thân chào!

Demo