Webkit image effects with masks
Today’s article may seem short, but it describes some interesting features of webkit browsers, in particular – the animation of images using masks. I want to warn – these examples will only work in webkit browsers (Chrome and Safari). The idea to study the masks came to me when I saw the Chrome browser logo on Google website. I liked this effect and I wondered to understand how it works. Well, what is a mask? Basically, this is an image (or gradient), where a transparent part will make your element invisible, non-transparent will make your element visible. These masks are similar as in Photoshop.
To make our examples I used the -webkit-mask property (with different variations). This property is used to set individual mask property values for various elements. Now, please check our little demo (and download our sources), and I will explain how it works.
Live Demo
[sociallocker]
download in package
[/sociallocker]
Step 1. HTML
Our HTML markup is really easy for today:
index.html
<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>
There are only four images. Every image has own unique effect.
Step 2. JS
To make first two effects I had to use custom radial gradients. The main idea is to display expanding radial gradient (in a loop) until it reaches the end of image. It is nearly impossible to change the radial gradient params of -webkit-mask params with onle CSS3 (even using keyframes). This is why I had to use javascript here.
js/main.js
$(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); }); });
As you see, in the ‘hover’ event handler it increases Radius of radial gradient in a loop
Step 3. CSS
To achieve the effects of another pair of images – it is sufficient to use only CSS3:
css/main.css
.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; }
As you see, for the third effect we use -webkit-mask-size property (to simulate some beats), for the fourth – we change -webkit-mask-position-x param. We change both params using :hover selector (in case if we hover our images).
Live Demo
Conclusion
That’s all. I’ve just gave you several examples of nice image effects with using of masks. I’m sure that it will be very useful for you. Good luck and welcome back
awesome nice
in any way, to do these effects it will be more easier and faster with flash .
Hello,
Yes, maybe, but sometimes we can’t rely on flash, it can be disabled, or even not supported (as example – on iphones)
Hi Andrew,
I’ve something to ask you, do you realy thinks it’s usseful in an business to know or does the major business use it even if only few ppl have Chrome/Safari ?
Thx.
Nyco
Hi Nyco, yes, sure, we always should take into account the Chrome (and Safary) browser.
Thanks man, is posible the same effect but automatic?? ( no hover)
Hi Akiro,
Yes, of course, but you will need to remove :hover from styles
Admin can you tell me something about cms with c# in dotnet…not using other language like php
Hi,
I am not sure that the C# is the suitable language for Web. You can try to consider ASP