Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Using MobileMe's animated wisps of cloud on your own site

U

u1725

macrumors member
Original poster
May 26, 2008
41
13
Hi,

Have you seen the new log in page on me.com? Well it's pretty nice.

I was wondering if anybody knew how to use that animation on your own site. I think a lot of people think it's pretty cool.

Does anybody know how to make a similar one, or better yet, copy Apple's and use it on your own site?

Thanks,
Ulrik :D
 
It's definitely HTML5 and some Javascript... I'm not sure how you would go about using it on your own site though. Perhaps give it a few days until google find some pages with people discussing it. :p
 
The source is fairly obfuscated, so Apple does not necessarily want you seeing how they are drawing this to the canvas.

And if you are thinking of using this on your own site, take a look at what sits at the very top:

<!-- IMPORTANT NOTE: This file is licensed only for use in providing the MobileMe service, or any part thereof, and is subject to the MobileMe Terms and Conditions. You may not port this file to another platform without Apple's written consent. -->
Click to expand...

Personally, I would use processing.js to get the same effect, but there are lots of ways of doing it.

Strangely, I got a much higher animation frame-rate in Firefox than in Safari....
 
You can unpack the javascript though.

Look at OL.FreeMasthead from line 3674 to line 5433.

It's full of fun math* like this:
Code: 
opacityCoeff = 1 - (opacityCoeff * (1 - 0.3 * Math.pow(Math.sin(t * (7 + 4 * r2) * Math.PI / 2), 4)));

Code: 
this.drawPoint(x, y, d, (Math.pow(r7 * 0.5 + 0.5, 3) * 2 - 1) * (Math.sin(10 * (Math.sin(3 * t)) * (1 + 0.5 * r3) * t) * 0.5 + 1) + 0.2 * mouseOffset, flashR, opacityCoeff, i)

On the inline script on the homepage Login.main() gets called. Which is line 6553 of the file attached. And that calls OL.MastheadContainer.create(). And that leads to the creation an FreeMasthead (with the pixie dust ln. 3674) or a CookiedMasthead (the buttons ln. 2941).

It is fun to have a look at. Someone smarter than me is probably working on a jQuery pixie dust plugin as I type.

*I know how to spell it properly I'm just humouring the mainly American audience this site attracts.
 

Attachments

  • javascript-unpacked.txt
    177 KB · Views: 464
Last edited:
I don't understand what to do :confused:, but i'm not very good at web development so...

Can you (or anyone else) translate it into step by step understandable english?
 
u1725 said:
I don't understand what to do :confused:, but i'm not very good at web development so...

Can you (or anyone else) translate it into step by step understandable english?
Click to expand...

This is a 6572-line javascript file. There is no way to explain it step-by-step if you don't have a fundamental understanding of javascript.

In "layman's terms" this is a particle animation system drawing into a canvas tag. Particle animation systems are not particularly difficult to make once you have grasped the concepts behind object oriented programming.

Here are some (arguably more complex) examples of javascript/canvas particle systems

http://www.mrspeaker.net/dev/parcycle/

and here is a particle library implemented with Jquery

http://erikfriend.com/jquery.particles/

using that library you could get pretty close to the effect on the mobile me page.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back