Parallax Scrolling

Aeroplane through clouds

by Chris Watson

HTML

<div id="cropArea"><img src="http://i47.tinypic.com/307s30p.png" id="plane"></div>

CSS

body{
    background:url(http://i47.tinypic.com/16bk3z5.jpg) #5af;
    /*
        http://i47.tinypic.com/16bk3z5.jpg
        http://i49.tinypic.com/a9wx2e.jpg
        http://i45.tinypic.com/23suoo0.jpg
        http://i50.tinypic.com/rk3jhl.jpg
        http://i46.tinypic.com/5u2x5h.jpg
        http://i48.tinypic.com/2rp5oqr.jpg
        http://i46.tinypic.com/2mr8d2c.jpg
    */
    width:2000px;
    height:4000px;
}
#cropArea{
    position:absolute;
    overflow:hidden;
}
#plane{
    position:fixed;
    left:0;
    top:0;
    z-index:1;
}
.cloud{
    z-index:2;
    position:absolute;
}

JavaScript

var b = document.body;
var plane = document.getElementById('plane');
var clouds = [];
var index = 0;
var cw = b.clientWidth; // page width
var ch = b.clientHeight; // page height
var vw = window.innerWidth; // viewport width
var vh = window.innerHeight; // viewport height

/* added 'box' to crop clouds moving beyond defined dimensions, rather than allowing the 'body' to grow indefinitely (becomes glitchy) */
var box = document.getElementById('cropArea');
box.style.width = cw + 'px';
box.style.height = ch + 'px';

// add random clouds
var noClouds = cw * ch / 100000;
while(noClouds > 0){
    var w = 254;
    var h = 198;
    var e = document.createElement('img');
    e.src = 'http://i49.tinypic.com/552pah.png';
    e.className = 'cloud';
    var x = Math.floor(Math.random() * (cw - w));
    var y = Math.floor(Math.random() * (ch - h));
    e.style.left = x + 'px';
    e.style.top = y + 'px';
    if(noClouds % 3 === 0){ // randomly bigger cloud at interval
        var scalar = 1 + Math.random();
        w = Math.floor(w * scalar);
        h = Math.floor(h * scalar);
        e.style.width = w + 'px';
        e.style.height = h + 'px';
        e.style.zIndex = '0';
        e.setAttribute('data-xy', x + ',' + y);
        clouds[index] = e;
        index++;
    }
    box.appendChild(e);
    noClouds--;
}

window.onscroll = function(){
    scrollElements();
};

function scrollElements(){
    var bgAmount = 0.9;
    var cloudAmount = 0.5;
    var x,y;
    // clouds
    for(var i = 0; i < clouds.length; i++){
        var c = clouds[i];
        var xy = c.getAttribute('data-xy').split(',');
        x =  (b.scrollLeft * cloudAmount) + parseInt(xy[0]);
        y =  (b.scrollTop * cloudAmount) + parseInt(xy[1]);
  //      if(x > cw - c.clientWidth)
    //        x = cw - c.clientWidth;
        c.style.left = x + 'px';
        c.style.top = y + 'px';
    }
    // background
    b.style.backgroundPosition = (b.scrollLeft * bgAmount) + 'px '
                               +...