iCloud Shimmer Effect

October 12, 2011

Today Alex pointed out the new iCloud website had lot’s of fancy effects. One I liked best was the polished metal effect on the login box that shimmered when you moved your mouse.

I went ahead duplicated it as best I could in a short time. There are some obvious differences in approach, but it’s essentially the same.

Shimmery Effect
View The Demo

One thing I did not do was the easing on the mouse move. I really like that, but it would be time consuming to get it running.

Also, I’m not browser compatible. I only tested it in Chrome 14.

Most of the work is done in two functions.

mousemove takes the mouse position and converts it to a degree of rotation.

draw rotates the canvas and draws the image onto it.

That’s essentially it. Simple, but visually powerful. The source is embedded in the demo and commented.

Categories: Geek
Tags: , ,

Comments

  1. Very cool!

    Too bad I can’t get to icloud.com, it’s blocked at my work :-(

  2. Jam Dan says:

    Could you please update the demo?
    It isn’t working anymore, thanks!

  3. John Hobbs says:

    Ye gads!

    I’ve fixed that link, thanks for pointing it out!

Leave A Comment

Your email will not be published.