Hot File

Guidelines do Mask Picture Effect Webkit browsers CSS3 and JQuery Degree

View: 270    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

9 point/2 review File has been tested

Today will share the title code to give you a beautiful picture effect, very suitable for the application on the logo image.

Introduction

Today will share the title code to give you a beautiful picture effect, very suitable for the application on the logo image.

There is one drawback is that this effect can only run on Webkit browsers (ie only on Chrome and Safari). However, you will learn a lot from this article, because you will better understand how to use the mask (mask) to create photo effects, which previously could only use the part software like Flash to do.

HTML

First, we build the following html standard framework

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

In the html inside, we insert 4 images to create logos in four different effects.

CSS

Depending on the different effects that you can choose to apply this in their website. You just need to copy the css below.


#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

And finally, to the effect can run, you use this script:


$(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);
    });
});

That was it, do you remember that this effect applies only to the webkit browser whiff.

 

Guidelines do Mask Picture Effect Webkit browsers CSS3 and JQuery Degree

Guidelines do Mask Picture Effect Webkit browsers CSS3 and JQuery Degree Posted on 15-12-2015  Today will share the title code to give you a beautiful picture effect, very suitable for the application on the logo image. 4.5/10 270

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd