1

If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.

But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.

Here's the link: https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=

And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.

Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.

Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.

Thanks in advance for all your suggestions ;)

Robson Junior
  • 13
  • 2
  • Why not look at the page source & JS files and see if you find anything? – Nathan Oct 14 '11 at 22:38
  • Also, noting that it doesn't work in non-CSS3 browsers (tested in IE7) it looks like the little floating stuff around it might be a combination of JavaScript & CSS3... – Nathan Oct 14 '11 at 22:40

2 Answers2

1

that takes a lot of skills. I believe its achievable with processing.js http://processingjs.org/

danniel
  • 1,751
  • 1
  • 11
  • 13
0

Take a look at this [quote]:

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.

So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js

I hope this helps.

Nathan
  • 11,814
  • 11
  • 50
  • 93