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:

<div id="main">
    <button>Default</button>
    <button>Primary</button>
    <button>Info</button>
    <button>Danger</button>
    <div style="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');
        return false;
    }

    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

Ripple Effect CSS + Javascript
5 (100%) 1 vote

Bình luận

2 Bình luận on "Ripple Effect CSS + Javascript"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
Đình Danh
Guest

cho 5*.
HTML5 rồi thì ko cần khúc type=”text/javascript” nữa đâu H.
hàm trong js thì nên viết dạng anonymous:
function function_name () {
//do sth
}
chứ không nên viết dạng
var function_name = function () {
//do sth
}
nếu viết dạng như này mà đặt câu này lên trên thì nó không chạy được: document.addEventListener(‘click’, addRippleEffect, false);

wpDiscuz