Here at Lucidity, we recently launched our new website. As part of the process we had to develop our own Enterprise Cloud Deployment Systems. By that I mean, we wrote some javascript to animate some clouds moving across the screen. In this post I'm going to briefly discuss the approach we took.

I should mention that we're not the first to do this by any means. Other sites that use this are:

Our approach relies heavily on jQuery, particularly to do the animation of the clouds.

At first we had written code to animate 3 different clouds moving at random speeds across the screen. After some testing on other machines we found that the CPUs on older hardware were not able to handle this. Part of the cause of this was the use of 24bit transparent PNGs for the clouds, but mostly it was just due to doing 3 animations every 13ms (the jQuery default time between animations - thats ~76 frames per second!).

We were able to come up with an acceptable solution to this problem by doing two things:

In the future we may look at using something like http://www.spritely.net/ to efficiently create clouds that change shape while also moving across the screen.

Heres the code for the animation:

Here's the relevant changes to jQuery for modifying the animation framerate.

I wish there was an easier way of changing the framerate, but anything else I tried didn't work.