Here’s a demonstrator I coded up for one of our web development classes, to illustrate some animation techniques.
Give it a try, put some clouds in your browser to while away your tea break.
Note how the clouds towards the top of the screen are larger, fewer in number, and faster moving than at the bottom of the screen, roughly simulating the wider field of view nearer the horizon. There’s a CSS gradient to try to sell the illusion too. This distribution is controlled by feeding output from the pseudorandom number generator into a function, giving a skewed distribution where larger numbers are more common than smaller numbers.
Controls are at the foot of the page. They are faded in and out using the CSS
transition property, whilst the cloud animations are done using the velocity.js library. I hand-drew the clouds (PNG format, for the variable transparency needed for compositing). I apologise in advance for some of the iffier ones.