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.

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;

    width: 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.width();

            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 width - 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é.