How to get the 'moving through clouds' animation in browser?

ScemedoGott

New Member
I saw a chrome experiment website recently.. while the experiment itself was amazing, there was a sort of an intro page to the website which had clouds moving in the background.. before the experiment even began.Looking at the firebug, the website has just one cloud image (I could be wrong) and I thought it would be challenging to recreate it upto some extent, as I am learning jquery.After several hours of trying different things, two things were apparent: [*]I suck at jquery [*]I probably need some guidanceInitially, I tried inserting random number of clouds at the bottom of screen and changing opacity and height+width through jquery animate.. but it turned out to be ridiculously slow.. Then, I thought, if I have a base layer of clouds in the background, I could just animate 2-3 clouds and make it look okay.. but the base layer looks worse..Can you please give me some tips as to how to achieve this? Thanks.Got a 'Can't submit question because: dont just link to jsfiddle' error. :/here's the code in jsfiddle: \[code\]<div> <div class="inner one"></div> <div class="inner two"></div><div>body { background-color: #00aaff;}div{ background-image: url(http://www.ro.me/files/cloud256.png); background-repeat: repeat-x; height: 300px; width: 100%;}div.inner{ position:absolute;}.one { left: 25px; top: 100px;}.two { left: 50px; top: 30px;}\[/code\]
 
Back
Top