Fire JS Bin - CSS3DClouds

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

(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 = [];

var links = document.querySelectorAll( 'a[rel=external]' );
for( var j = 0; j < links.length; j++ ) {
    var a = links[ j ];
    a.addEventListener( 'click', function( e ) {
        window.open( this.href, '_blank' );
        e.preventDefault();
    }, false );
}

viewport.style.webkitPerspective = p;
viewport.style.MozPerspective = p;
viewport.style.oPerspective = p;

textures = [
    { name: 'white cloud', 	file: '/assets/clouds/cloud.png'		, opacity: 1, weight: 0 },
    { name: 'dark cloud', 	file: '/assets/clouds/darkCloud.png'	, opacity: 1, weight: 0 },
    { name: 'smoke cloud', 	file: '/assets/clouds/smoke.png'		, opacity: 1, weight: 0 },
    { name: 'explosion', 	file: '/assets/clouds/explosion.png'	, opacity: 1, weight: 0 },
    { name: 'explosion 2', 	file: '/assets/clouds/explosion2.png'	, opacity: 1, weight: 0 },
    { name: 'box', 			file: '/assets/clouds/box.png'			, opacity: 1, weight: 0 }
];

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

document.getElementById( 'cloudsPreset' ).addEventListener( 'click', function( e ) {
    setTextureUsage( 0, 'Lot' );
    setTextureUsage( 1, 'None' );
    setTextureUsage( 2, 'None' );
    setTextureUsage( 3, 'None' );
    setTextureUsage( 4, 'None' );
    setTextureUsage( 5, 'None' );
    generate();
    e.preventDefault();
} );

document.getElementById( 'stormPreset' ).addEventListener( 'click', function( e ) {
    setTextureUsage( 0, 'None' );
    setTextureUsage( 1, 'None' );
    setTextureUsage( 2, 'Lot' );
    setTextureUsage( 3, 'None' );
    setTextureUsage( 4, 'None' );
    setTextureUsage( 5, 'None' );
    generate();
    e.preventDefault();
} );

document.getElementById( 'boomPreset' ).addEventListener( 'click', function( e ) {
    setTextureUsage( 0, 'None' );
    setTextureUsage( 1, 'None' );
    setTextureUsage( 2, 'Lot' );
    setTextureUsage( 3, 'Few' );
    setTextureUsage( 4, 'None' );
    setTextureUsage( 5, 'None' );
    generate();
    e.preventDefault();
} );

document.getElementById( 'bayPreset' ).addEventListener( 'click', function( e ) {
    setTextureUsage( 0, 'None' );
    setTextureUsage( 1, 'None' );
    setTextureUsage( 2, 'Normal' );
    setTextureUsage( 3, 'Lot' );
    setTextureUsage( 4, 'Lot' );
    setTextureUsage( 5, 'None' );
    generate();
    e.preventDefault();
} );

function createCloud() {

window.addEventListener( 'mousewheel', onContainerMouseWheel );
window.addEventListener( 'DOMMouseScroll', onContainerMouseWheel ); 
//window.addEventListener( 'deviceorientation', orientationhandler, false );
//window.addEventListener( 'MozOrientation', orientationhandler, false );

document.getElementById( 'generateBtn' ).addEventListener( 'click', function( e ) {
    generate();
    e.preventDefault();
} );

window.addEventListener( 'keydown', function( e ) {
    if( e.keyCode == 32 ) generate();
} );

window.addEventListener( 'mousemove', function( e ) {
    worldYAngle = -( .5 - ( e.clientX / window.innerWidth ) ) * 180;
    worldXAngle = ( .5 - ( e.clientY / window.innerHeight ) ) * 180;
    //worldXAngle = .1 * ( e.clientY - .5 * window.innerHeight );
    //worldYAngle = .1 * ( e.clientX - .5 * window.innerWidth );
    updateView();
} );

window.addEventListener( 'touchmove', function( e ) {
    //if( e.targetTouches.length == 1) {
        var touch = e.targetTouches[ 0 ];
        worldYAngle = Math.random() * 200; //( - .1 * ( touch.pageX - .5 * window.innerWidth ) );
        worldXAngle = Math.random() * 200; //(   .1 * ( touch.pageY - .5 * window.innerHeight ) );
    //}
} );

function updateView() {
    var t = 'translateZ( ' + d + 'px ) rotateX( ' + worldXAngle + 'deg) rotateY( ' + worldYAngle + 'deg)';
    world.style.webkitTransform = t;
    world.style.MozTransform = t;
    world.style.oTransform = t;
}

function onContainerMouseWheel( event ) {
        
    event = event ? event : window.event;
    d = d - ( event.detail ? event.detail * -5 : event.wheelDelta / 8 );
    updateView();
    
}

function orientationhandler( e ){
      
    if( !e.gamma && !e.beta ) {
        e.gamma = -( e.x * ( 180 / Math.PI ) );
        e.beta = -( e.y * ( 180 / Math.PI ) );
    }
    
    var x = e.gamma;
    var y = e.beta;
    
    worldXAngle = y;
    worldYAngle = x;
    updateView();
    
}

function update (){
    
    for( var j = 0; j < layers.length; j++ ) {
        var layer = layers[ j ];
        layer.data.a += layer.data.speed;
        var t = 'translateX( ' + layer.data.x + 'px ) translateY( ' + layer.data.y + 'px ) translateZ( ' + layer.data.z + 'px ) rotateY( ' + ( - worldYAngle ) + 'deg ) rotateX( ' + ( - worldXAngle ) + 'deg ) rotateZ( ' + layer.data.a + 'deg ) scale( ' + layer.data.s + ')';
        layer.style.webkitTransform = t;
        layer.style.MozTransform = t;
        layer.style.oTransform = t;
    }
    
    requestAnimationFrame( update );
    
}

update();

<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id="viewport"><div id="world"></div></div>
    <div id="options">
      <a href="#" id="closeBtn" class="button">X</a>
      <h1>CSS3D Clouds</h1>
      <div id="optionsContent">
        <p>An experiment on creating <span class="nope">volumetric</span>3d-like clouds with CSS3 3D Transforms and a bit of Javascript.</p>
        <p>Move the <b>mouse to rotate</b>around and <b>mouse wheel to zoom</b>in and out. Hit <b>space to generate</b>a new cloud. Works on <b>Firefox</b>(faster if Nightly), <b>Chrome</b>and <b>Safari</b>.</p>
        <div class="actions">
          <a class="button" href="#" id="generateBtn">Generate clouds</a>
          <a class="button" href="#" id="showTextureControlsBtn">Show texture controls</a>
          <a class="button" href="#" id="fullscreenBtn">Fullscreen</a>
        </div>
        <div id="textureControls">
          <h2>Texture list</h2>
          <p>Select one or more textures to create clouds. The more the merrier!</p>
          <ul id="textureList"></ul>
        </div>
        <h2>Presets</h2>
        <div class="presets">
          <a href="#" class="left button" id="cloudsPreset">Clouds</a>
          <a href="#" class="middle button" id="stormPreset">Storm</a>
          <a href="#" class="middle button" id="boomPreset">Boom</a>
          <a href="#" class="right button" id="bayPreset">Michael Bay</a>
        </div>
        <div style="clear:both; height: 20px; display: block"></div>
        <h2>Credits</h2>
        <p>Coded by Jaume Sánchez (<a href="http://twitter.com/thespite" rel="external">@thespite</a>)
          <br/><br/>Inspired on Mr.doob's <a href="http://mrdoob.com/131/Clouds" rel="external">WebGL clouds</a>and
          <br/>Mark J. Harris' <a href="http://www.markmark.net/PDFs/RTCloudsForGames_HarrisGDC2002.pdf" rel="external">Real-Time Cloud Rendering for Games</a>.
          <br/><br/>Fonts Open Sans and Lato are from <a href="http://www.google.com/webfonts" rel="external">Google Web Fonts</a>.
          <br/>Textures are property of their respective owners.</p>
      </div>
    </div>
  </body>

</html>

*{ 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0 
}
body {
    color: #eee;
    text-shadow: 0 -1px 0 rgba( 0, 0, 0, .6 );
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 16px;
    overflow: hidden;
}
#viewport {
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    -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;
}

#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 ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

#options {
    position: absolute;
    left: 0;
    top: 0;
    margin: 10px;
    padding: 20px;
    width: 400px;
    background-color: rgba( 0, 0, 0, .4 );
    border-radius: 5px;
}

#optionsContent{
    margin-top: 20px;
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}

h1{
    font-family: 'Lato', sans-serif;
}

h2{
    font-family: 'Lato', sans-serif;
    margin-bottom: 10px
}

p{
    margin-bottom: 20px;
}

.actions{
    margin-bottom: 20px;
}

#textureList li{
    clear: both;
    list-style-type: none;
    position: relative;
    height: 35px;
    padding-top: 10px;
}

#textureList li span {
    text-transform: capitalize;
}

#textureList div{
    position: absolute;
    right: 0;
    top: 0;
}

#textureList li a{
    float: left;
}

a {
    color: inherit;
}

#textureControls {
    display: none;
}

#closeBtn {
    position: absolute; 
    right: 15px;
    top: 10px;
}

.presets{
}

.presets a{
    float: left;
}

.nope{
    text-decoration: line-through;
}

:-moz-full-screen #options{ display: none }
:-webkit-full-screen #options{ display: none }

.button { display: inline-block; padding: 7px 9px; font-size: inherit; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-background-clip: padding-box; border-radius: 2px; outline: none; position: relative; zoom: 1; *display: inline; }
.button.primary { font-weight: bold }
.button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
.button:active,
.button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
.button:active { top: 1px }
.button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }
.button.negative:active,
.button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }
.button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 6px 12px; }
.button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; }
.button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-left: none; }
.button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; border-left: none;}
.button.left:active,
.button.middle:active,
.button.right:active { top: 0px }
.button.big { font-size: 16px; padding: 7px 16px; }
.button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 1px; background-image: url('/images/css3buttons_icons.png'); background-repeat: no-repeat; }
.big.button span.icon { top: 0px }
.button span.icon.book { background-position: 0 0 }
.button:hover span.icon.book { background-position: 0 -15px }
.button span.icon.calendar { background-position: 0 -30px }
.button:hover span.icon.calendar { background-position: 0 -45px }
.button span.icon.chat { background-position: 0 -60px }
.button:hover span.icon.chat { background-position: 0 -75px }
.button span.icon.check { background-position: 0 -90px }
.button:hover span.icon.check { background-position: 0 -103px }
.button span.icon.clock { background-position: 0 -116px }
.button:hover span.icon.clock { background-position: 0 -131px }
.button span.icon.cog { background-position: 0 -146px }
.button:hover span.icon.cog { background-position: 0 -161px }
.button span.icon.comment { background-position: 0 -176px }
.button:hover span.icon.comment { background-position: 0 -190px }
.button span.icon.cross { background-position: 0 -204px }
.button:hover span.icon.cross { background-position: 0 -219px }
.button span.icon.downarrow { background-position: 0 -234px }
.button:hover span.icon.downarrow { background-position: 0 -249px }
.button span.icon.fork { background-position: 0 -264px }
.button:hover span.icon.fork { background-position: 0 -279px }
.button span.icon.heart { background-position: 0 -294px }
.button:hover span.icon.heart { background-position: 0 -308px }
.button span.icon.home { background-position: 0 -322px }
.button:hover span.icon.home { background-position: 0 -337px }
.button span.icon.key { background-position: 0 -352px }
.button:hover span.icon.key { background-position: 0 -367px }
.button span.icon.leftarrow { background-position: 0 -382px }
.button:hover span.icon.leftarrow { background-position: 0 -397px }
.button span.icon.lock { background-position: 0 -412px }
.button:hover span.icon.lock { background-position: 0 -427px }
.button span.icon.loop { background-position: 0 -442px }
.button:hover span.icon.loop { background-position: 0 -457px }
.button span.icon.magnifier { background-position: 0 -472px }
.button:hover span.icon.magnifier { background-position: 0 -487px }
.button span.icon.mail { background-position: 0 -502px }
.button:hover span.icon.mail { background-position: 0 -514px }
.button span.icon.move { background-position: 0 -526px }
.button:hover span.icon.move { background-position: 0 -541px }
.button span.icon.pen { background-position: 0 -556px }
.button:hover span.icon.pen { background-position: 0 -571px }
.button span.icon.pin { background-position: 0 -586px }
.button:hover span.icon.pin { background-position: 0 -601px }
.button span.icon.plus { background-position: 0 -616px }
.button:hover span.icon.plus { background-position: 0 -631px }
.button span.icon.reload { background-position: 0 -646px }
.button:hover span.icon.reload { background-position: 0 -660px }
.button span.icon.rightarrow { background-position: 0 -674px }
.button:hover span.icon.rightarrow { background-position: 0 -689px }
.button span.icon.rss { background-position: 0 -704px }
.button:hover span.icon.rss { background-position: 0 -719px }
.button span.icon.tag { background-position: 0 -734px }
.button:hover span.icon.tag { background-position: 0 -749px }
.button span.icon.trash { background-position: 0 -764px }
.button:hover span.icon.trash { background-position: 0 -779px }
.button span.icon.unlock { background-position: 0 -794px }
.button:hover span.icon.unlock { background-position: 0 -809px }
.button span.icon.uparrow { background-position: 0 -824px }
.button:hover span.icon.uparrow { background-position: 0 -839px }
.button span.icon.user { background-position: 0 -854px }
.button:hover span.icon.user { background-position: 0 -869px }

Pop out