Interactive and Realistic 3D Clouds

Using only Css3 and a bit of Javascript to render an interractive and realistic 3D clouds.

* requires Chrome, Safari, Firefox 5+ or IE10+.

Coded by Jaume Sánchez.
http://www.clicktorelease.com

Framework 1 :

Framework 2 :

+ Js file(s) :

+ Css file(s) :
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="8af" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

CSS

*{ 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0 
}
body {
  overflow: hidden;
}
#viewport {
  -webkit-perspective: 1000; 
  -moz-perspective: 1000; 
  -o-perspective: 1000;
  perspective: 1000;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: -moz-linear-gradient(0deg, #0e6bb1 0%, #64b1eb 50%, #0e6bb1 100%);
  background: -webkit-linear-gradient(90deg, #0e6bb1 0%, #64b1eb 50%, #0e6bb1 100%);
  background: linear-gradient(0deg, #0e6bb1 0%, #64b1eb 50%, #0e6bb1 100%);
  background-color: #000;
  background-size:20px 100%px;
  background-repeat:repeat-x; 
}

#world {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -256px;
  margin-top: -256px;
  height: 512px;
  width: 512px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#world div {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Javascript

var layers = [],
    objects = [],
    
    world = document.getElementById( 'world' ),
    viewport = document.getElementById( 'viewport' ),
    
    d = 0,
    p = 400,
    worldXAngle = 0,
    worldYAngle = 0;

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

generate();

window.addEventListener( 'mousewheel', onContainerMouseWheel );
window.addEventListener( 'DOMMouseScroll', onContainerMouseWheel );

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

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 update (){
  
  for( var j = 0; j &lt; 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();

Interactive and Realistic 3D Clouds

Link :

Fork button :

Embed preview :