22 11 / 2010
The New MobileMe Login Page Has Some Badass JS!
Apple has released a new login page for MobileMe with some badass JavaScript up its sleeve. Not only does the page feature a beautiful design, but it is also highly interactive, and is based on HTML5 features like the canvas element, and some CSS3 features as well.
There is animating fairy dust that moves out from the cloud toward each of the devices behind it. If you move your mouse over that dust, it will respond to your mouse as well. When the dust reaches one of the devices, it lights up a bit as if receiving energy or something. A very neat effect indeed!
Once you start logging in and you have a MobileMe account, the icons will fall through the “floor”, and new icons will pop up in their place representing the applications included in MobileMe. A neat effect also.
So, how is this eye candy accomplished? Through over 6000 lines of (unminified) JS. MobileMe usually uses SproutCore for its applications, but after looking through the source code, I didn’t find a single reference to it. There did appear to be some resemblance of a library being used in the login page, however, but I think it is pretty custom. There appeared to be a class for each of the visual components on the screen, at least one if not two separate animation libraries (one 2d and one 3d), a particle rendering library, and libraries for dealing with canvas drawing and DOM manipulation.
The fairy dust is rendered in a large canvas element, and there are 8 other canvases (2 for each of the devices) used to create the effect. The two canvases around each of the devices are used to render the animating border and the screen when fairy dust comes near them.
Apple is known for creating rich, interactive, and visually appealing and exciting user interfaces. The way it has been executing them on the web is also quite exciting. It is with more mainstream sites like this embracing the new web technologies available now through HTML5, CSS3 and JavaScript that the web will become the next great application platform. Excellent work, MobileMe team!
