плывущие облака JavaScript

by Denis Tverdokhlebov

HTML

<!--
 New cloud formation on page load 
!-->

<div id="sk">
  <div id="clds"></div>
</div>

CSS

body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  filter: blur(2px);
  background:hsla(255,255%,255%,1);
}

#sk {
  background-image: linear-gradient(-45deg, hsla(62, 100%, 50%, .5), hsla(322, 100%, 50%, .5));
  animation: hue-rot 20s infinite alternate;
  perspective:400;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

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

#clds div {
  transform-style: preserve-3d;
}

.bl {
  position: absolute;
  left: 256px;
  top: 256px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
}


.clay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 256px;
  height: 256px;
  margin-left: -128px;
  margin-top: -128px;
  transition: opacity .5s ease-out;
}

@keyframes hue-rot {
  100% {
    filter: hue-rotate(360deg);
  }
}

JavaScript

/*
Adapted from http://www.clicktorelease.com/code/css3dclouds/

*Eliminated a lot of it -- Utilized the transform parameters from that tutorial. 

*Loading only one image instead of multiples through the JS.

*Auto-Rotation instead of mouse-controlled rotation.

*Doesn't have all those other fancy options 
*/

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

var $ = document.getElementById('clds'),
    $$ = document.getElementById('sk'),
    x = 0,
    y = 0,
    a = 0;
var larr = [];
var clarr = [];
var mv = 0;
var pov = 400;

var rot = function() {
  mv++;
  if (mv == pov) {
    mv = 0;
  } else {
    y += 0.1;
  }
  chngV();
}

var chngV = function() {
  var trans = 'translateZ( ' + a + 'px ) rotateX( ' + x + 'deg) rotateY( ' + y + 'deg)';
  $.style.webkitTransform = trans;
  $.style.MozTransform = trans;
  $.style.oTransform = trans;
};

$$.style.webkitPerspective = pov;
$$.style.MozPerspective = pov;
$$.style.oPerspective = pov;

var create = function() {
  clarr = [];
  if ($.hasChildNodes()) {
    while ($.childNodes.length >= 1) {
      $.removeChild($.firstChild);
    }
  }
  for (var i = 0; i < 12; i++) {
    clarr.push(build());
  }
}

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

  var trans = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )';
  div.style.webkitTransform = trans;
  div.style.MozTransform = trans;
  div.style.oTransform = trans;
  $.appendChild(div);

  for (var i = 0; i < 5 + Math.round(Math.random() * 12); i++) {
    var c = document.createElement('img');
    c.style.opacity...