How to replicate Google Chrome web page javascript logo effect

Question

On http://www.google.com/chrome/ if you hover your mouse over the Chrome logo, there's a javascript animation.

I've tried to look at the code and it looks like some -webkit-gradient effect, but I am unable to replicate it.

Any idea how they did it?

Bests

Answer 1

They used a webkit-gradient as webkit-mask .

Default value :
-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)));

Function called to update it :
this.d.style.webkitMaskImage = pa("-webkit-gradient(radial, 17 17, %s, 17 17, %s,from(rgba(0, 0, 0, 1)),color-stop(0.5, rgba(0, 0, 0, 0.2)),to(rgba(0, 0, 0, 1)))", Math.floor(this.coords[0]), Math.floor(this.coords[0] + 15))

this.coords[0] seems to be 123.

Then they use some function to update the %s values from 0 to this.coords[0] on mouseover .

minified sources

Answer 2

Doing something like that in-program would be insanely difficult to actually do (but I don't know, maybe they did do it). My suspicion is that they just made a white gradiented ring in photoshop or whatever and enlarged it via javascript with some sort of mouse hover function. Or they just might've made an animation of the entire logo and cycled through it when the user hovers the mouse over it.

Here are some links that might help you for the mouse hover part. http://www.w3schools.com/jsref/event_onmousedown.asp http://www.w3schools.com/jsref/event_clientx.asp

Either way, the solution doesn't have to be complicated as it looks!