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.
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.
mousemove: function ( event ) { // Use the mouse x coordinate conbined with the window width to // come up with a degree to rotate. You can make it more responsive // by decreasing the reduction. var reduction = 200; var deg = ( window.innerWidth / 2 - event.clientX ) * -1 / reduction; if( deg != Shimmer.current_rotation ) { Shimmer.draw( deg ); } }
draw rotates the canvas and draws the image onto it.
// Rotate the metal background draw: function ( deg ) { Shimmer.current_rotation = deg; // Clear the canvas Shimmer.context.clearRect( 0, 0, Shimmer.canvas.width, Shimmer.canvas.height ); Shimmer.context.save(); // Set the rotation point at 50% from left and & 80px from top Shimmer.context.translate( Shimmer.center.x, 80 ); // Rotate by degrees (convert to radians) Shimmer.context.rotate( deg * Math.PI / 180 ); // Draw metal Shimmer.context.drawImage( Shimmer.image, Shimmer.offset.x, Shimmer.offset.y ); // Clear transforms Shimmer.context.restore(); }
That’s essentially it. Simple, but visually powerful. The source is embedded in the demo and commented.
Comments
This is neat!
Very cool!
Too bad I can’t get to icloud.com, it’s blocked at my work :-(