JS Clouds for bg

by secretgspot

HTML

<div id="viewport" >
    <div id="world" >
    </div>
</div>

CSS

#viewport {
        -webkit-perspective: 1000; 
        -moz-perspective: 1000px; 
        -o-perspective: 1000; 
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
        background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
        background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
        background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
        background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.28, rgb(69,132,180)),
            color-stop(0.64, rgb(31,71,120))
        );
    }

    #world {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -256px;
        margin-top: -256px;
        height: 512px;
        width: 512px;
        //border: 1px solid rgb( 255, 0, 0 );
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        pointer-events: none;
    }
    
    #world div {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;    
        -o-transform-style: preserve-3d;    
    }
    
    .cloudBase {
        //border: 1px solid #ff00ff;
        position: absolute;
        left: 256px;
        top: 256px;
        width: 20px;
        height: 20px;
        margin-left: -10px;
        margin-top: -10px;
    }
    
    .cloudLayer {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 256px;
        height: 256px;
        margin-left: -128px;
        margin-top: -128px;
        //border: 1px solid red;
        -webkit-transition: opacity .5s...

JavaScript

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelRequestAnimationFrame = window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}())

var layers = [],
    objects = [],
    textures = [],

    world = document.getElementById('world'),
    viewport = document.getElementById('viewport'),

    d = 0,
    p = 400,
    worldXAngle = 0,
    worldYAngle = 0,
    computedWeights = [];


viewport.style.webkitPerspective = p;
viewport.style.MozPerspective = p + 'px';
viewport.style.oPerspective = p;

textures = [
    {
    name: 'white cloud',
    file: 'http://www.clicktorelease.com/code/css3dclouds/cloud.png',
    opacity: 1,
    weight: 0}
];


setTextureUsage(0, 'Lot');
generate();


function setTextureUsage(id, mode) {
    var modes = ['None', 'Few', 'Normal', 'Lot'];
    var weights = {
        'None': 0,
        'Few': .3,
        'Normal': .7,
        'Lot': 1
    };
    for (var j = 0; j < modes.length; j++) {
        if (modes[j] == mode) {
            textures[id].weight = weights[mode];
        }
    }
}


function createCloud() {

    var div = document.createElement('div');
    div.className = 'cloudBase';
    var x = 256 - (Math.random() * 512);
    var y = 256 - (Math.random() * 512);
    var z = 256 - (Math.random() * 512);
    var...