Hiệu ứng mask ảnh cho trình duyệt Webkit bằng CSS3 và jQuery

Hôm  nay mình sẽ chia sẻ cho các bạn một hiệu ứng ảnh đẹp mắt, rất thích hợp cho việc áp dụng vào các ảnh logo.  Có một nhược điểm là hiệu ứng này chỉ có thể chạy được trên các trình duyệt Webkit (tức là chỉ có trên Chrome và Safari). Tuy nhiên, các bạn sẽ học hỏi được rất nhiều từ bài viết này, vì các bạn sẽ hiểu rõ hơn về cách sử dụng mask (lớp mặt nạ) để tạo hiệu ứng cho ảnh, điều mà trước đây chỉ có thể dùng các phần mềm như Flash để làm.

Xem Demo | Download

HTML

Đầu tiên, chúng ta xây dựng khung chuẩn html như sau :

<div id="examples">
    <img class="type1" src="images/logo.png" />
    <img class="type2" src="images/logo2.png" />
    <img class="type3" src="images/logo3.png" />
    <img class="type4" src="images/logo4.png" />
</div>

Trong đoạn html bên trên, chúng ta chèn 4 ảnh logo vào để tạo 4 hiệu ứng khác nhau.

CSS

Tùy theo hiệu ứng khác nhau mà các bạn sẽ chọn lựa để áp dụng vào trong trang web của mình. Các bạn chỉ cần copy đoạn css bên dưới.

#examples {
    margin: 50px auto 0;
    overflow: hidden;
    awidth: 840px;
}
#examples img {
    float: left;
    margin: 10px;
}

.type3 {
    -webkit-mask: url(images/mask.png) no-repeat center center;
}
.type3:hover{
    -webkit-animation: loop_frames 1s ease-in-out infinite;
     -webkit-animation-direction:alternate;
     -webkit-mask-size: auto 100%;
}
@-webkit-keyframes loop_frames {
     0% { -webkit-mask-size: auto 100%; }
     100% { -webkit-mask-size: auto 70%; }
}

.type4 {
    -webkit-transition: -webkit-mask-position 0.5s ease;
    -webkit-mask-size: 400px 300px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.90, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0)));
    -webkit-mask-position-x: 400px;
}
.type4:hover {
     -webkit-mask-position-x: 0;
}

jQuery

Và cuối cùng, để hiệu ứng có thể chạy được, các bạn sử dụng đoạn script sau :

$(document).ready(function(){ 

    $('#examples img').hover(function () {
        var $imgObj = $(this);

        // class name
        var sClass = $(this).attr('class');

        // radius
        var iRad = 0;

        // interval
        var iInt;
        if (iInt) window.clearInterval(iInt);

        // loop until end
        iInt = window.setInterval(function() {
            var iWidth = $imgObj.awidth();
            var iHalfWidth = iWidth / 2;
            var iHalfHeight = $imgObj.height() / 2;

            if (sClass == 'type1') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfWidth+' '+iHalfHeight+', '+ iRad +', '+iHalfWidth+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            } else if (sClass == 'type2') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfHeight+' '+iHalfHeight+', '+ iRad +', '+iHalfHeight+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            }

            // when radius is more than our awidth - stop loop
            if (iRad > iWidth) {
                window.clearInterval(iInt);
            }

            iRad+=2;
        }, 10);
    });
});

Thế là xong, các bạn nhớ là hiệu ứng này chỉ áp dụng cho các trình duyệt webkit thôi nhé.

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster