Printable View
Hey guys I've always wanted to do something like this but I never thought it was possible with CSS or whatever it is.
I've been tried to work this thing out but I can't figure out how to make it work.
Basically here is what I'm looking for:
https://www.google.com/chrome/browse...l?platform=win
Have u guys did mouseover on the top left logo?
Any hint on getting that effect??
Thanks in advance.
Look into css masking. This is the code that they used for the mouseover effect
Code:-webkit-mask: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));
Yeah I know I've found that but the CSS is totally a mess and it also need JavaScript.
I've tried to make the page again using everything that is on that page but when I try to detele menu or some div it doesn't work anymore..it's like it is connected to other calls.
CSS: http://www.google.com/intl/it_ALL/chrome/assets/common/css/chrome.min.css
JavaScript: http://www.google.com/chrome/assets/common/js/chrome-installer.min.js
I've found it...but it also gives the effect with u leave with the mouse -.-
http://www.script-tutorials.com/webkit-image-effects-with-masks/
How can I fix this?
That's actually pretty simple. In that version of jQuery (and I think all, but this may have changed) the .hover() function allows one to pair at least two functions. It's the equivalent of mouseneter combined with mouseleave. But they only specified one function. In that case, it gets repeat for mouseleave. So, you can either add an empty function at the end, or some other function if you want something else to happen on mouseleave, or just change hover to mouseenter (probably the simplest):
Alternate method (adding a dummy function at the end - scroll down to see it - as I say you can add stuff in there if you want, but empty is what stops the effect from repeating):Code:jQuery(document).ready(function($){
$('#examples img').mouseenter(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);
});
});
Code:jQuery(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);
}, function(){});
});