2

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:

  1. I suck at jquery
  2. I probably need some guidance

Initially, 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 some of the code in jsfiddle: 

<div>
    <div class="inner one"></div>
    <div class="inner two"></div>
<div>

Update

After exploring more of the site, I discovered that the whole site's code is open source.. and is available for anyone to download and contribute.

The code is available on google

The clouds animation is done via webGL; something that I am not familiar with. I am going to try and reproduce that effect in jquery - may not be as good, but I think the challenge is worth a try.

Meanwhile, if anyone understands or has an idea on how to simulate this in jquery, please let me know.

If I manage to duplicate it in jquery; I'll post that as an answer.

Alexander
  • 241
  • 3
  • 12
  • Step 1) View Source. Step 2) Read extensively. – Blazemonger Jan 21 '13 at 17:33
  • @Blazemonger, already tried view-source - nothing human readable there.. furthermore.. not a single html element within body -__- – Alexander Jan 21 '13 at 17:36
  • 3
    Yes, they're using a canvas and minimized JS code. This doesn't alter the fact that we can't see anything in that code [which you can't see yourself](http://stackoverflow.com/q/822119/901048). StackOverflow is a good place to get solutions to specific bugs and issues, but we won't write complete tutorials for you. – Blazemonger Jan 21 '13 at 17:39
  • @Alexander: Please find out and then answer your own question. You last comment sounds promising you'll do so. – hakre Jan 21 '13 at 19:24

1 Answers1

0

The example you showed used Canvas one of HTML5's new features, it also really good for creating animations and such. You could use some JS and canvas to create this effect but you could also use jQuery to accomplish the same thing without canvas however I think the jQuery method would be more intensive and require more resources. The idea would probably be to have a couple base layers of clouds then a couple more front clouds that you would have starting in the back and growing over a small period of time. All of these images would need to be transparent img's so you'll need something like Photoshop. What they're doing though is not that difficult its most likely a continuous loop that cycles through several images changing the sizes and moving them slightly to create the effect you see. Check this site out, it uses canvas but its much more complex:

http://disneydigitalbooks.go.com/tron/

Tom Bird
  • 999
  • 3
  • 17
  • 31