Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First of all your question is awsome, secondly this is not an answer to your question as much as it is tweaking to your animation.<br/> i added different layers of opacity to the clouds, increasing interval to the animation speed to make it more realistic (closer clouds move fasted than far ones) and generated random sizes for the clouds, here's the code (pure javascript):</p> <pre><code>var clouds = 4, cloudSpeed = 20, browserWidth = window.innerWidth, browserHeight = window.innerHeight, int = 5; for (i = 0; i &lt; clouds; i++) { createCloud(cloudSpeed, i, int); } function moveCloud(cloud) { var posX = (cloud.offsetLeft &lt; -250) ? browserWidth : cloud.offsetLeft; posX--; cloud.style.left = posX + "px"; } function createCloud(speed, index, interval) { var posY = Math.floor(Math.random() * (browserHeight / 2.5)), posX = Math.floor(Math.random() * (browserWidth - 255)), cloud = document.createElement('div'), height = h + Math.floor(Math.random() * 40), width = w + Math.floor(Math.random() * 40); cloud.className = "cloud"; cloud.innerHTML = svg(width, height);//added svg scalable background, see the demo document.getElementsByTagName('body')[0].appendChild(cloud); cloud.style.left = posX + "px"; cloud.style.top = posY + "px"; cloud.style.opacity = 1 - (index / 10); cloud.style.zIndex = (clouds - index) * 100; setInterval(function () { moveCloud(cloud); }, speed + (interval * index)); } </code></pre> <p><a href="http://jsfiddle.net/arcm111/u8zVm/" rel="nofollow">DEMO</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload