Login / Join
Interactive and Realistic 3D Clouds
submitted on 19/02/2013 by
Chtiwi Malek
+ infos
Config
Embed
Share
Interactive and Realistic 3D Clouds
by
Chtiwi Malek
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 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.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
<div id="viewport"> <div id="world"></div> </div>
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
(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 = [], 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(); 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 t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )'; div.style.webkitTransform = t; div.style.MozTransform = t; div.style.oTransform = t; world.appendChild( div ); for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) { var cloud = document.createElement( 'img' ); cloud.style.opacity = 0; var r = Math.random(); var src = 'http://www.clicktorelease.com/code/css3dclouds/cloud.png'; ( function( img ) { img.addEventListener( 'load', function() { img.style.opacity = .8; } ) } )( cloud ); cloud.setAttribute( 'src', src ); cloud.className = 'cloudLayer'; var x = 256 - ( Math.random() * 512 ); var y = 256 - ( Math.random() * 512 ); var z = 100 - ( Math.random() * 200 ); var a = Math.random() * 360; var s = .25 + Math.random(); x *= .2; y *= .2; cloud.data = { x: x, y: y, z: z, a: a, s: s, speed: .1 * Math.random() }; var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px ) rotateZ( ' + a + 'deg ) scale( ' + s + ' )'; cloud.style.webkitTransform = t; cloud.style.MozTransform = t; cloud.style.oTransform = t; div.appendChild( cloud ); layers.push( cloud ); } return div; } 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 generate() { objects = []; if ( world.hasChildNodes() ) { while ( world.childNodes.length >= 1 ) { world.removeChild( world.firstChild ); } } for( var j = 0; j < 5; j++ ) { objects.push( createCloud() ); } } 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 < 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();
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact