CODEWITHSUNDEEP
javascript
wanted
wanted

Reputation: 389

How to replicate Google Chrome web page javascript logo effect

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

Upvotes: 0

Views: 80

Answers (2)

Kaiido
Kaiido

Reputation: 137054

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

Upvotes: 1

Liam Wofford
Liam Wofford

Reputation: 3

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!

Upvotes: 0

Related Questions