├── LICENSE
├── README.md
├── box.png
├── buttons.css
├── cloud.png
├── darkCloud.png
├── explosion.png
├── explosion2.png
├── index.html
├── smoke.png
└── troll.png


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Jaume Sanchez
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | CSS3D Clouds
2 | ===========
3 | 
4 | Demo: http://clicktorelease.com/code/css3dclouds
5 | 
6 | Tutorial: https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d/
7 | 
8 | 


--------------------------------------------------------------------------------
/box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/CSS3DClouds/c062c4e2972318fe7684f2defa544f34581fe0ca/box.png


--------------------------------------------------------------------------------
/buttons.css:
--------------------------------------------------------------------------------
  1 | .button {
  2 |   display: inline-block;
  3 |   padding: 7px 9px;
  4 |   font-size: inherit;
  5 |   color: #3c3c3d;
  6 |   text-shadow: 1px 1px 0 #ffffff;
  7 |   background: #ececec;
  8 |   white-space: nowrap;
  9 |   overflow: visible;
 10 |   cursor: pointer;
 11 |   text-decoration: none;
 12 |   border: 1px solid #cacaca;
 13 |   -webkit-border-radius: 2px;
 14 |   -moz-border-radius: 2px;
 15 |   -webkit-background-clip: padding-box;
 16 |   border-radius: 2px;
 17 |   outline: none;
 18 |   position: relative;
 19 |   zoom: 1;
 20 |   *display: inline;
 21 | }
 22 | .button.primary {
 23 |   font-weight: bold;
 24 | }
 25 | .button:hover {
 26 |   color: #ffffff;
 27 |   border-color: #388ad4;
 28 |   text-decoration: none;
 29 |   text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 30 |   background-position: 0 -40px;
 31 |   background-color: #2d7dc5;
 32 | }
 33 | .button:active,
 34 | .button.active {
 35 |   background-position: 0 -81px;
 36 |   border-color: #347bba;
 37 |   background-color: #0f5ea2;
 38 |   color: #ffffff;
 39 |   text-shadow: none;
 40 | }
 41 | .button:active {
 42 |   top: 1px;
 43 | }
 44 | .button.negative:hover {
 45 |   color: #ffffff;
 46 |   background-position: 0 -121px;
 47 |   background-color: #d84743;
 48 |   border-color: #911d1b;
 49 | }
 50 | .button.negative:active,
 51 | .button.negative.active {
 52 |   background-position: 0 -161px;
 53 |   background-color: #a5211e;
 54 |   border-color: #911d1b;
 55 | }
 56 | .button.pill {
 57 |   -webkit-border-radius: 19px;
 58 |   -moz-border-radius: 19px;
 59 |   border-radius: 19px;
 60 |   padding: 6px 12px;
 61 | }
 62 | .button.left {
 63 |   -webkit-border-bottom-right-radius: 0px;
 64 |   -webkit-border-top-right-radius: 0px;
 65 |   -moz-border-radius-bottomright: 0px;
 66 |   -moz-border-radius-topright: 0px;
 67 |   border-bottom-right-radius: 0px;
 68 |   border-top-right-radius: 0px;
 69 |   margin-right: 0px;
 70 | }
 71 | .button.middle {
 72 |   margin-right: 0px;
 73 |   margin-left: 0px;
 74 |   -webkit-border-radius: 0px;
 75 |   -moz-border-radius: 0px;
 76 |   border-radius: 0px;
 77 |   border-left: none;
 78 | }
 79 | .button.right {
 80 |   -webkit-border-bottom-left-radius: 0px;
 81 |   -webkit-border-top-left-radius: 0px;
 82 |   -moz-border-radius-bottomleft: 0px;
 83 |   -moz-border-radius-topleft: 0px;
 84 |   border-top-left-radius: 0px;
 85 |   border-bottom-left-radius: 0px;
 86 |   margin-left: 0px;
 87 |   border-left: none;
 88 | }
 89 | .button.left:active,
 90 | .button.middle:active,
 91 | .button.right:active {
 92 |   top: 0px;
 93 | }
 94 | .button.big {
 95 |   font-size: 16px;
 96 |   padding: 7px 16px;
 97 | }
 98 | .button span.icon {
 99 |   display: inline-block;
100 |   width: 14px;
101 |   height: 12px;
102 |   margin: auto 7px auto auto;
103 |   position: relative;
104 |   top: 1px;
105 |   background-image: url("/images/css3buttons_icons.png");
106 |   background-repeat: no-repeat;
107 | }
108 | .big.button span.icon {
109 |   top: 0px;
110 | }
111 | .button span.icon.book {
112 |   background-position: 0 0;
113 | }
114 | .button:hover span.icon.book {
115 |   background-position: 0 -15px;
116 | }
117 | .button span.icon.calendar {
118 |   background-position: 0 -30px;
119 | }
120 | .button:hover span.icon.calendar {
121 |   background-position: 0 -45px;
122 | }
123 | .button span.icon.chat {
124 |   background-position: 0 -60px;
125 | }
126 | .button:hover span.icon.chat {
127 |   background-position: 0 -75px;
128 | }
129 | .button span.icon.check {
130 |   background-position: 0 -90px;
131 | }
132 | .button:hover span.icon.check {
133 |   background-position: 0 -103px;
134 | }
135 | .button span.icon.clock {
136 |   background-position: 0 -116px;
137 | }
138 | .button:hover span.icon.clock {
139 |   background-position: 0 -131px;
140 | }
141 | .button span.icon.cog {
142 |   background-position: 0 -146px;
143 | }
144 | .button:hover span.icon.cog {
145 |   background-position: 0 -161px;
146 | }
147 | .button span.icon.comment {
148 |   background-position: 0 -176px;
149 | }
150 | .button:hover span.icon.comment {
151 |   background-position: 0 -190px;
152 | }
153 | .button span.icon.cross {
154 |   background-position: 0 -204px;
155 | }
156 | .button:hover span.icon.cross {
157 |   background-position: 0 -219px;
158 | }
159 | .button span.icon.downarrow {
160 |   background-position: 0 -234px;
161 | }
162 | .button:hover span.icon.downarrow {
163 |   background-position: 0 -249px;
164 | }
165 | .button span.icon.fork {
166 |   background-position: 0 -264px;
167 | }
168 | .button:hover span.icon.fork {
169 |   background-position: 0 -279px;
170 | }
171 | .button span.icon.heart {
172 |   background-position: 0 -294px;
173 | }
174 | .button:hover span.icon.heart {
175 |   background-position: 0 -308px;
176 | }
177 | .button span.icon.home {
178 |   background-position: 0 -322px;
179 | }
180 | .button:hover span.icon.home {
181 |   background-position: 0 -337px;
182 | }
183 | .button span.icon.key {
184 |   background-position: 0 -352px;
185 | }
186 | .button:hover span.icon.key {
187 |   background-position: 0 -367px;
188 | }
189 | .button span.icon.leftarrow {
190 |   background-position: 0 -382px;
191 | }
192 | .button:hover span.icon.leftarrow {
193 |   background-position: 0 -397px;
194 | }
195 | .button span.icon.lock {
196 |   background-position: 0 -412px;
197 | }
198 | .button:hover span.icon.lock {
199 |   background-position: 0 -427px;
200 | }
201 | .button span.icon.loop {
202 |   background-position: 0 -442px;
203 | }
204 | .button:hover span.icon.loop {
205 |   background-position: 0 -457px;
206 | }
207 | .button span.icon.magnifier {
208 |   background-position: 0 -472px;
209 | }
210 | .button:hover span.icon.magnifier {
211 |   background-position: 0 -487px;
212 | }
213 | .button span.icon.mail {
214 |   background-position: 0 -502px;
215 | }
216 | .button:hover span.icon.mail {
217 |   background-position: 0 -514px;
218 | }
219 | .button span.icon.move {
220 |   background-position: 0 -526px;
221 | }
222 | .button:hover span.icon.move {
223 |   background-position: 0 -541px;
224 | }
225 | .button span.icon.pen {
226 |   background-position: 0 -556px;
227 | }
228 | .button:hover span.icon.pen {
229 |   background-position: 0 -571px;
230 | }
231 | .button span.icon.pin {
232 |   background-position: 0 -586px;
233 | }
234 | .button:hover span.icon.pin {
235 |   background-position: 0 -601px;
236 | }
237 | .button span.icon.plus {
238 |   background-position: 0 -616px;
239 | }
240 | .button:hover span.icon.plus {
241 |   background-position: 0 -631px;
242 | }
243 | .button span.icon.reload {
244 |   background-position: 0 -646px;
245 | }
246 | .button:hover span.icon.reload {
247 |   background-position: 0 -660px;
248 | }
249 | .button span.icon.rightarrow {
250 |   background-position: 0 -674px;
251 | }
252 | .button:hover span.icon.rightarrow {
253 |   background-position: 0 -689px;
254 | }
255 | .button span.icon.rss {
256 |   background-position: 0 -704px;
257 | }
258 | .button:hover span.icon.rss {
259 |   background-position: 0 -719px;
260 | }
261 | .button span.icon.tag {
262 |   background-position: 0 -734px;
263 | }
264 | .button:hover span.icon.tag {
265 |   background-position: 0 -749px;
266 | }
267 | .button span.icon.trash {
268 |   background-position: 0 -764px;
269 | }
270 | .button:hover span.icon.trash {
271 |   background-position: 0 -779px;
272 | }
273 | .button span.icon.unlock {
274 |   background-position: 0 -794px;
275 | }
276 | .button:hover span.icon.unlock {
277 |   background-position: 0 -809px;
278 | }
279 | .button span.icon.uparrow {
280 |   background-position: 0 -824px;
281 | }
282 | .button:hover span.icon.uparrow {
283 |   background-position: 0 -839px;
284 | }
285 | .button span.icon.user {
286 |   background-position: 0 -854px;
287 | }
288 | .button:hover span.icon.user {
289 |   background-position: 0 -869px;
290 | }
291 | 


--------------------------------------------------------------------------------
/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/CSS3DClouds/c062c4e2972318fe7684f2defa544f34581fe0ca/cloud.png


--------------------------------------------------------------------------------
/darkCloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/CSS3DClouds/c062c4e2972318fe7684f2defa544f34581fe0ca/darkCloud.png


--------------------------------------------------------------------------------
/explosion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/CSS3DClouds/c062c4e2972318fe7684f2defa544f34581fe0ca/explosion.png


--------------------------------------------------------------------------------
/explosion2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/CSS3DClouds/c062c4e2972318fe7684f2defa544f34581fe0ca/explosion2.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <meta charset="utf-8" />
  4 |     <title>CSS 3D Clouds</title>
  5 |     <link
  6 |       href="http://fonts.googleapis.com/css?family=Lato:900"
  7 |       rel="stylesheet"
  8 |       type="text/css"
  9 |     />
 10 |     <link
 11 |       href="http://fonts.googleapis.com/css?family=Open+Sans:400,700"
 12 |       rel="stylesheet"
 13 |       type="text/css"
 14 |     />
 15 |     <link href="buttons.css" rel="stylesheet" type="text/css" />
 16 |     <style>
 17 |       * {
 18 |         box-sizing: border-box;
 19 |         margin: 0;
 20 |         padding: 0;
 21 |       }
 22 |       body {
 23 |         color: #eee;
 24 |         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
 25 |         font-family: "Open Sans", sans-serif;
 26 |         font-size: 13px;
 27 |         line-height: 16px;
 28 |         overflow: hidden;
 29 |       }
 30 |       #viewport {
 31 |         -webkit-perspective: 1000;
 32 |         -moz-perspective: 1000px;
 33 |         -o-perspective: 1000;
 34 |         perspective: 1000px;
 35 |         position: absolute;
 36 |         left: 0;
 37 |         top: 0;
 38 |         right: 0;
 39 |         bottom: 0;
 40 |         overflow: hidden;
 41 |         background-image: linear-gradient(
 42 |           bottom,
 43 |           rgb(69, 132, 180) 28%,
 44 |           rgb(31, 71, 120) 64%
 45 |         );
 46 |         background-image: -o-linear-gradient(
 47 |           bottom,
 48 |           rgb(69, 132, 180) 28%,
 49 |           rgb(31, 71, 120) 64%
 50 |         );
 51 |         background-image: -moz-linear-gradient(
 52 |           bottom,
 53 |           rgb(69, 132, 180) 28%,
 54 |           rgb(31, 71, 120) 64%
 55 |         );
 56 |         background-image: -webkit-linear-gradient(
 57 |           bottom,
 58 |           rgb(69, 132, 180) 28%,
 59 |           rgb(31, 71, 120) 64%
 60 |         );
 61 |         background-image: -ms-linear-gradient(
 62 |           bottom,
 63 |           rgb(69, 132, 180) 28%,
 64 |           rgb(31, 71, 120) 64%
 65 |         );
 66 | 
 67 |         background-image: -webkit-gradient(
 68 |           linear,
 69 |           left bottom,
 70 |           left top,
 71 |           color-stop(0.28, rgb(69, 132, 180)),
 72 |           color-stop(0.64, rgb(31, 71, 120))
 73 |         );
 74 |       }
 75 | 
 76 |       #world {
 77 |         position: absolute;
 78 |         left: 50%;
 79 |         top: 50%;
 80 |         margin-left: -256px;
 81 |         margin-top: -256px;
 82 |         height: 512px;
 83 |         width: 512px;
 84 |         //border: 1px solid rgb( 255, 0, 0 );
 85 |         -webkit-transform-style: preserve-3d;
 86 |         -moz-transform-style: preserve-3d;
 87 |         -o-transform-style: preserve-3d;
 88 |         transform-style: preserve-3d;
 89 |         pointer-events: none;
 90 |       }
 91 | 
 92 |       #world div {
 93 |         -webkit-transform-style: preserve-3d;
 94 |         -moz-transform-style: preserve-3d;
 95 |         -o-transform-style: preserve-3d;
 96 |         transform-style: preserve-3d;
 97 |       }
 98 | 
 99 |       .cloudBase {
100 |         //border: 1px solid #ff00ff;
101 |         position: absolute;
102 |         left: 256px;
103 |         top: 256px;
104 |         width: 20px;
105 |         height: 20px;
106 |         margin-left: -10px;
107 |         margin-top: -10px;
108 |       }
109 | 
110 |       .cloudLayer {
111 |         position: absolute;
112 |         left: 50%;
113 |         top: 50%;
114 |         width: 256px;
115 |         height: 256px;
116 |         margin-left: -128px;
117 |         margin-top: -128px;
118 |         -webkit-transition: opacity 0.5s ease-out;
119 |         -moz-transition: opacity 0.5s ease-out;
120 |         -o-transition: opacity 0.5s ease-out;
121 |         transition: opacity 0.5s ease-out;
122 |       }
123 | 
124 |       #options {
125 |         position: absolute;
126 |         left: 0;
127 |         top: 0;
128 |         margin: 10px;
129 |         padding: 20px;
130 |         width: 400px;
131 |         background-color: rgba(0, 0, 0, 0.4);
132 |         border-radius: 5px;
133 |       }
134 | 
135 |       #optionsContent {
136 |         margin-top: 20px;
137 |         -webkit-transition: all 1s ease-out;
138 |         -moz-transition: all 1s ease-out;
139 |         -o-transition: all 1s ease-out;
140 |         transition: all 1s ease-out;
141 |       }
142 | 
143 |       h1 {
144 |         font-family: "Lato", sans-serif;
145 |       }
146 | 
147 |       h2 {
148 |         font-family: "Lato", sans-serif;
149 |         margin-bottom: 10px;
150 |       }
151 | 
152 |       p {
153 |         margin-bottom: 20px;
154 |       }
155 | 
156 |       .actions {
157 |         margin-bottom: 20px;
158 |       }
159 | 
160 |       #textureList li {
161 |         clear: both;
162 |         list-style-type: none;
163 |         position: relative;
164 |         height: 35px;
165 |         padding-top: 10px;
166 |       }
167 | 
168 |       #textureList li span {
169 |         text-transform: capitalize;
170 |       }
171 | 
172 |       #textureList div {
173 |         position: absolute;
174 |         right: 0;
175 |         top: 0;
176 |       }
177 | 
178 |       #textureList li a {
179 |         float: left;
180 |       }
181 | 
182 |       a {
183 |         color: inherit;
184 |       }
185 | 
186 |       #textureControls {
187 |         display: none;
188 |       }
189 | 
190 |       #closeBtn {
191 |         position: absolute;
192 |         right: 15px;
193 |         top: 10px;
194 |       }
195 | 
196 |       .presets {
197 |       }
198 | 
199 |       .presets a {
200 |         float: left;
201 |       }
202 | 
203 |       .nope {
204 |         text-decoration: line-through;
205 |       }
206 | 
207 |       :-moz-full-screen #options {
208 |         display: none;
209 |       }
210 |       :-webkit-full-screen #options {
211 |         display: none;
212 |       }
213 |       :full-screen #options {
214 |         display: none;
215 |       }
216 |     </style>
217 |   </head>
218 |   <body>
219 |     <div id="viewport">
220 |       <div id="world"></div>
221 |     </div>
222 | 
223 |     <div id="options">
224 |       <a href="#" id="closeBtn" class="button">X</a>
225 |       <h1>CSS3D Clouds</h1>
226 |       <div id="optionsContent">
227 |         <p>
228 |           An experiment on creating <span class="nope">volumetric</span> 3d-like
229 |           clouds with CSS3 3D Transforms and a bit of Javascript.
230 |         </p>
231 |         <p>
232 |           <a
233 |             class="button"
234 |             rel="external"
235 |             href="http://www.clicktorelease.com/tutorials/css3dclouds"
236 |             >Check out the tutorial here!</a
237 |           >
238 |         </p>
239 |         <p>
240 |           Move the <b>mouse to rotate</b> around and
241 |           <b>mouse wheel to zoom</b> in and out. Hit <b>space to generate</b> a
242 |           new cloud. Works on <b>Firefox</b> (faster if Nightly),
243 |           <b>Chrome</b> and <b>Safari</b>.
244 |         </p>
245 |         <div class="actions">
246 |           <a class="button" href="#" id="generateBtn">Generate clouds</a>
247 |           <a class="button" href="#" id="showTextureControlsBtn"
248 |             >Show controls</a
249 |           >
250 |           <a class="button" href="#" id="fullscreenBtn">Go fullscreen</a>
251 |         </div>
252 |         <div id="textureControls">
253 |           <h2>Texture list</h2>
254 |           <p>
255 |             Select one or more textures to create clouds. The more the merrier!
256 |             Click <b>Generate</b> to update.
257 |           </p>
258 |           <ul id="textureList"></ul>
259 |         </div>
260 |         <h2>Presets</h2>
261 |         <div class="presets">
262 |           <a href="#" class="left button" id="cloudsPreset">Clouds</a>
263 |           <a href="#" class="middle button" id="stormPreset">Storm</a>
264 |           <a href="#" class="middle button" id="boomPreset">Boom</a>
265 |           <a href="#" class="right button" id="bayPreset">Michael Bay</a>
266 |         </div>
267 |         <div style="clear: both; height: 20px; display: block"></div>
268 |         <h2>Credits</h2>
269 |         <p>
270 |           Coded by Jaume Sánchez (<a
271 |             href="http://twitter.com/thespite"
272 |             rel="external"
273 |             >@thespite</a
274 |           >)<br />
275 |           Code available in
276 |           <a href="https://github.com/spite/CSS3DClouds" rel="external"
277 |             >GitHub</a
278 |           ><br /><br />
279 |           Inspired on Mr.doob's
280 |           <a href="http://mrdoob.com/131/Clouds" rel="external">WebGL clouds</a>
281 |           and <br />Mark J. Harris'
282 |           <a
283 |             href="http://www.markmark.net/PDFs/RTCloudsForGames_HarrisGDC2002.pdf"
284 |             rel="external"
285 |             >Real-Time Cloud Rendering for Games</a
286 |           >.<br /><br />
287 |           Fonts Open Sans and Lato are from
288 |           <a href="http://www.google.com/webfonts" rel="external"
289 |             >Google Web Fonts</a
290 |           >.<br />
291 |           Textures are property of their respective owners.
292 |         </p>
293 |       </div>
294 |     </div>
295 | 
296 |     <script>
297 |       (function () {
298 |         var lastTime = 0;
299 |         var vendors = ["ms", "moz", "webkit", "o"];
300 |         for (
301 |           var x = 0;
302 |           x < vendors.length && !window.requestAnimationFrame;
303 |           ++x
304 |         ) {
305 |           window.requestAnimationFrame =
306 |             window[vendors[x] + "RequestAnimationFrame"];
307 |           window.cancelRequestAnimationFrame =
308 |             window[vendors[x] + "CancelRequestAnimationFrame"];
309 |         }
310 | 
311 |         if (!window.requestAnimationFrame)
312 |           window.requestAnimationFrame = function (callback, element) {
313 |             var currTime = new Date().getTime();
314 |             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
315 |             var id = window.setTimeout(function () {
316 |               callback(currTime + timeToCall);
317 |             }, timeToCall);
318 |             lastTime = currTime + timeToCall;
319 |             return id;
320 |           };
321 | 
322 |         if (!window.cancelAnimationFrame)
323 |           window.cancelAnimationFrame = function (id) {
324 |             clearTimeout(id);
325 |           };
326 |       })();
327 | 
328 |       var layers = [],
329 |         objects = [],
330 |         textures = [],
331 |         world = document.getElementById("world"),
332 |         viewport = document.getElementById("viewport"),
333 |         d = 0,
334 |         p = 400,
335 |         worldXAngle = 0,
336 |         worldYAngle = 0,
337 |         computedWeights = [];
338 | 
339 |       var links = document.querySelectorAll("a[rel=external]");
340 |       for (var j = 0; j < links.length; j++) {
341 |         var a = links[j];
342 |         a.addEventListener(
343 |           "click",
344 |           function (e) {
345 |             window.open(this.href, "_blank");
346 |             e.preventDefault();
347 |           },
348 |           false
349 |         );
350 |       }
351 | 
352 |       viewport.style.webkitPerspective = p;
353 |       viewport.style.MozPerspective = p + "px";
354 |       viewport.style.oPerspective = p;
355 |       viewport.style.perspective = p;
356 | 
357 |       textures = [
358 |         { name: "white cloud", file: "cloud.png", opacity: 1, weight: 0 },
359 |         { name: "dark cloud", file: "darkCloud.png", opacity: 1, weight: 0 },
360 |         { name: "smoke cloud", file: "smoke.png", opacity: 1, weight: 0 },
361 |         { name: "explosion", file: "explosion.png", opacity: 1, weight: 0 },
362 |         { name: "explosion 2", file: "explosion2.png", opacity: 1, weight: 0 },
363 |         { name: "box", file: "box.png", opacity: 1, weight: 0 },
364 |       ];
365 | 
366 |       var el = document.getElementById("textureList");
367 |       for (var j = 0; j < textures.length; j++) {
368 |         var li = document.createElement("li");
369 |         var span = document.createElement("span");
370 |         span.textContent = textures[j].name;
371 |         var div = document.createElement("div");
372 |         div.className = "buttons";
373 |         var btnNone = document.createElement("a");
374 |         btnNone.setAttribute("id", "btnNone" + j);
375 |         btnNone.setAttribute("href", "#");
376 |         btnNone.textContent = "None";
377 |         btnNone.className = "left button";
378 |         var btnFew = document.createElement("a");
379 |         btnFew.setAttribute("id", "btnFew" + j);
380 |         btnFew.setAttribute("href", "#");
381 |         btnFew.textContent = "A few";
382 |         btnFew.className = "middle button";
383 |         var btnNormal = document.createElement("a");
384 |         btnNormal.setAttribute("id", "btnNormal" + j);
385 |         btnNormal.setAttribute("href", "#");
386 |         btnNormal.textContent = "Some";
387 |         btnNormal.className = "middle button";
388 |         var btnLot = document.createElement("a");
389 |         btnLot.setAttribute("id", "btnLot" + j);
390 |         btnLot.setAttribute("href", "#");
391 |         btnLot.textContent = "A lot";
392 |         btnLot.className = "right button";
393 | 
394 |         (function (id) {
395 |           btnNone.addEventListener("click", function () {
396 |             setTextureUsage(id, "None");
397 |           });
398 |           btnFew.addEventListener("click", function () {
399 |             setTextureUsage(id, "Few");
400 |           });
401 |           btnNormal.addEventListener("click", function () {
402 |             setTextureUsage(id, "Normal");
403 |           });
404 |           btnLot.addEventListener("click", function () {
405 |             setTextureUsage(id, "Lot");
406 |           });
407 |         })(j);
408 | 
409 |         li.appendChild(span);
410 |         div.appendChild(btnNone);
411 |         div.appendChild(btnFew);
412 |         div.appendChild(btnNormal);
413 |         div.appendChild(btnLot);
414 |         li.appendChild(div);
415 |         el.appendChild(li);
416 | 
417 |         setTextureUsage(j, "None");
418 |       }
419 | 
420 |       setTextureUsage(0, "Lot");
421 |       generate();
422 | 
423 |       document
424 |         .getElementById("cloudsPreset")
425 |         .addEventListener("click", function (e) {
426 |           setTextureUsage(0, "Lot");
427 |           setTextureUsage(1, "None");
428 |           setTextureUsage(2, "None");
429 |           setTextureUsage(3, "None");
430 |           setTextureUsage(4, "None");
431 |           setTextureUsage(5, "None");
432 |           generate();
433 |           e.preventDefault();
434 |         });
435 | 
436 |       document
437 |         .getElementById("stormPreset")
438 |         .addEventListener("click", function (e) {
439 |           setTextureUsage(0, "None");
440 |           setTextureUsage(1, "None");
441 |           setTextureUsage(2, "Lot");
442 |           setTextureUsage(3, "None");
443 |           setTextureUsage(4, "None");
444 |           setTextureUsage(5, "None");
445 |           generate();
446 |           e.preventDefault();
447 |         });
448 | 
449 |       document
450 |         .getElementById("boomPreset")
451 |         .addEventListener("click", function (e) {
452 |           setTextureUsage(0, "None");
453 |           setTextureUsage(1, "None");
454 |           setTextureUsage(2, "Lot");
455 |           setTextureUsage(3, "Few");
456 |           setTextureUsage(4, "None");
457 |           setTextureUsage(5, "None");
458 |           generate();
459 |           e.preventDefault();
460 |         });
461 | 
462 |       document
463 |         .getElementById("bayPreset")
464 |         .addEventListener("click", function (e) {
465 |           setTextureUsage(0, "None");
466 |           setTextureUsage(1, "None");
467 |           setTextureUsage(2, "Normal");
468 |           setTextureUsage(3, "Lot");
469 |           setTextureUsage(4, "Lot");
470 |           setTextureUsage(5, "None");
471 |           generate();
472 |           e.preventDefault();
473 |         });
474 | 
475 |       function setTextureUsage(id, mode) {
476 |         var modes = ["None", "Few", "Normal", "Lot"];
477 |         var weights = { None: 0, Few: 0.3, Normal: 0.7, Lot: 1 };
478 |         for (var j = 0; j < modes.length; j++) {
479 |           var el = document.getElementById("btn" + modes[j] + id);
480 |           el.className = el.className.replace(" active", "");
481 |           if (modes[j] == mode) {
482 |             el.className += " active";
483 |             textures[id].weight = weights[mode];
484 |           }
485 |         }
486 |       }
487 | 
488 |       var optionsContent = document.getElementById("optionsContent");
489 |       var el = document
490 |         .getElementById("closeBtn")
491 |         .addEventListener("click", function (e) {
492 |           if (optionsContent.style.display != "block") {
493 |             optionsContent.style.display = "block";
494 |           } else {
495 |             optionsContent.style.display = "none";
496 |           }
497 |           e.preventDefault();
498 |         });
499 | 
500 |       var textureControls = document.getElementById("textureControls");
501 |       var el = document
502 |         .getElementById("showTextureControlsBtn")
503 |         .addEventListener("click", function (e) {
504 |           if (textureControls.style.display != "block") {
505 |             textureControls.style.display = "block";
506 |           } else {
507 |             textureControls.style.display = "none";
508 |           }
509 |           e.preventDefault();
510 |         });
511 | 
512 |       var el = document.getElementById("fullscreenBtn");
513 |       if (el) {
514 |         var options = document.getElementById("options");
515 |         el.addEventListener(
516 |           "click",
517 |           function (e) {
518 |             if (document.body.webkitRequestFullScreen) {
519 |               document.body.onwebkitfullscreenchange = function (e) {
520 |                 //	options.style.display = 'none';
521 |                 document.body.style.width = window.innerWidth + "px";
522 |                 document.body.style.height = window.innerHeight + "px";
523 |                 document.body.onwebkitfullscreenchange = function () {
524 |                   //		options.style.display = 'block';
525 |                 };
526 |               };
527 |               document.body.webkitRequestFullScreen();
528 |             }
529 |             if (document.body.mozRequestFullScreen) {
530 |               /*document.body.onmozfullscreenchange = function( e ) {
531 | 					options.style.display = 'none';
532 | 					document.body.onmozfullscreenchange = function( e ) {
533 | 						options.style.display = 'block';
534 | 					};
535 | 				};*/
536 |               document.body.mozRequestFullScreen();
537 |             }
538 |             e.preventDefault();
539 |           },
540 |           false
541 |         );
542 |       }
543 | 
544 |       function createCloud() {
545 |         var div = document.createElement("div");
546 |         div.className = "cloudBase";
547 |         var x = 256 - Math.random() * 512;
548 |         var y = 256 - Math.random() * 512;
549 |         var z = 256 - Math.random() * 512;
550 |         var t =
551 |           "translateX( " +
552 |           x +
553 |           "px ) translateY( " +
554 |           y +
555 |           "px ) translateZ( " +
556 |           z +
557 |           "px )";
558 |         div.style.webkitTransform = div.style.MozTransform = div.style.oTransform = div.style.transform = t;
559 |         world.appendChild(div);
560 | 
561 |         for (var j = 0; j < 5 + Math.round(Math.random() * 10); j++) {
562 |           var cloud = document.createElement("img");
563 |           cloud.style.opacity = 0;
564 |           var r = Math.random();
565 |           var src = "troll.png";
566 |           for (var k = 0; k < computedWeights.length; k++) {
567 |             if (r >= computedWeights[k].min && r <= computedWeights[k].max) {
568 |               (function (img) {
569 |                 img.addEventListener("load", function () {
570 |                   img.style.opacity = 0.8;
571 |                 });
572 |               })(cloud);
573 |               src = computedWeights[k].src;
574 |             }
575 |           }
576 |           if (computedWeights.length === 0) {
577 |             cloud.style.opacity = 0.8;
578 |           }
579 |           cloud.setAttribute("src", src);
580 |           cloud.className = "cloudLayer";
581 | 
582 |           var x = 256 - Math.random() * 512;
583 |           var y = 256 - Math.random() * 512;
584 |           var z = 100 - Math.random() * 200;
585 |           var a = Math.random() * 360;
586 |           var s = 0.25 + Math.random();
587 |           x *= 0.2;
588 |           y *= 0.2;
589 |           cloud.data = {
590 |             x: x,
591 |             y: y,
592 |             z: z,
593 |             a: a,
594 |             s: s,
595 |             speed: 0.1 * Math.random(),
596 |           };
597 |           var t =
598 |             "translateX( " +
599 |             x +
600 |             "px ) translateY( " +
601 |             y +
602 |             "px ) translateZ( " +
603 |             z +
604 |             "px ) rotateZ( " +
605 |             a +
606 |             "deg ) scale( " +
607 |             s +
608 |             " )";
609 |           cloud.style.webkitTransform = cloud.style.MozTransform = cloud.style.oTransform = cloud.style.transform = t;
610 | 
611 |           div.appendChild(cloud);
612 |           layers.push(cloud);
613 |         }
614 | 
615 |         return div;
616 |       }
617 | 
618 |       window.addEventListener("mousewheel", onContainerMouseWheel);
619 |       window.addEventListener("DOMMouseScroll", onContainerMouseWheel);
620 |       //window.addEventListener( 'deviceorientation', orientationhandler, false );
621 |       //window.addEventListener( 'MozOrientation', orientationhandler, false );
622 | 
623 |       document
624 |         .getElementById("generateBtn")
625 |         .addEventListener("click", function (e) {
626 |           generate();
627 |           e.preventDefault();
628 |         });
629 | 
630 |       window.addEventListener("keydown", function (e) {
631 |         if (e.keyCode == 32) generate();
632 |       });
633 | 
634 |       window.addEventListener("mousemove", function (e) {
635 |         worldYAngle = -(0.5 - e.clientX / window.innerWidth) * 180;
636 |         worldXAngle = (0.5 - e.clientY / window.innerHeight) * 180;
637 |         //worldXAngle = .1 * ( e.clientY - .5 * window.innerHeight );
638 |         //worldYAngle = .1 * ( e.clientX - .5 * window.innerWidth );
639 |         updateView();
640 |       });
641 | 
642 |       window.addEventListener("touchmove", function (e) {
643 |         var ptr = e.changedTouches.length;
644 |         while (ptr--) {
645 |           var touch = e.changedTouches[ptr];
646 |           worldYAngle = -(0.5 - touch.pageX / window.innerWidth) * 180;
647 |           worldXAngle = (0.5 - touch.pageY / window.innerHeight) * 180;
648 |           updateView();
649 |         }
650 |         e.preventDefault();
651 |       });
652 | 
653 |       function generate() {
654 |         objects = [];
655 |         if (world.hasChildNodes()) {
656 |           while (world.childNodes.length >= 1) {
657 |             world.removeChild(world.firstChild);
658 |           }
659 |         }
660 |         computedWeights = [];
661 |         var total = 0;
662 |         for (var j = 0; j < textures.length; j++) {
663 |           if (textures[j].weight > 0) {
664 |             total += textures[j].weight;
665 |           }
666 |         }
667 |         var accum = 0;
668 |         for (var j = 0; j < textures.length; j++) {
669 |           if (textures[j].weight > 0) {
670 |             var w = textures[j].weight / total;
671 |             computedWeights.push({
672 |               src: textures[j].file,
673 |               min: accum,
674 |               max: accum + w,
675 |             });
676 |             accum += w;
677 |           }
678 |         }
679 |         for (var j = 0; j < 5; j++) {
680 |           objects.push(createCloud());
681 |         }
682 |       }
683 | 
684 |       function updateView() {
685 |         var t =
686 |           "translateZ( " +
687 |           d +
688 |           "px ) rotateX( " +
689 |           worldXAngle +
690 |           "deg) rotateY( " +
691 |           worldYAngle +
692 |           "deg)";
693 |         world.style.webkitTransform = world.style.MozTransform = world.style.oTransform = world.style.transform = t;
694 |       }
695 | 
696 |       function onContainerMouseWheel(event) {
697 |         event = event ? event : window.event;
698 |         d = d - (event.detail ? event.detail * -5 : event.wheelDelta / 8);
699 |         updateView();
700 |       }
701 | 
702 |       function orientationhandler(e) {
703 |         if (!e.gamma && !e.beta) {
704 |           e.gamma = -(e.x * (180 / Math.PI));
705 |           e.beta = -(e.y * (180 / Math.PI));
706 |         }
707 | 
708 |         var x = e.gamma;
709 |         var y = e.beta;
710 | 
711 |         worldXAngle = y;
712 |         worldYAngle = x;
713 |         updateView();
714 |       }
715 | 
716 |       function update() {
717 |         for (var j = 0; j < layers.length; j++) {
718 |           var layer = layers[j];
719 |           layer.data.a += layer.data.speed;
720 |           var t =
721 |             "translateX( " +
722 |             layer.data.x +
723 |             "px ) translateY( " +
724 |             layer.data.y +
725 |             "px ) translateZ( " +
726 |             layer.data.z +
727 |             "px ) rotateY( " +
728 |             -worldYAngle +
729 |             "deg ) rotateX( " +
730 |             -worldXAngle +
731 |             "deg ) rotateZ( " +
732 |             layer.data.a +
733 |             "deg ) scale( " +
734 |             layer.data.s +
735 |             ")";
736 |           layer.style.webkitTransform = layer.style.MozTransform = layer.style.oTransform = layer.style.transform = t;
737 |           //layer.style.webkitFilter = 'blur(5px)';
738 |         }
739 | 
740 |         requestAnimationFrame(update);
741 |       }
742 | 
743 |       update();
744 |     </script>
745 |   </body>
746 | </html>
747 | 


--------------------------------------------------------------------------------
/smoke.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/CSS3DClouds/c062c4e2972318fe7684f2defa544f34581fe0ca/smoke.png


--------------------------------------------------------------------------------
/troll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/CSS3DClouds/c062c4e2972318fe7684f2defa544f34581fe0ca/troll.png


--------------------------------------------------------------------------------