jocafa/dust.html

## dust.html
<!DOCTYPE html>
<html>
  <head>
    <title>Dust</title>
    <!-- Mobile -->
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
      html, body {
        min-height: 100%;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      body {
        background-image: -webkit-radial-gradient(50% -10%, #ddd, #888);
        -webkit-perspective: 800px;
        -webkit-transform-style: preserve-3d;
        overflow: hidden;
      }

      .ray {
        position: absolute;
        top: 0px;
        left: 50%;
        width: 50px;
        height: 110%;
        background-image: -webkit-radial-gradient(50% -20%,
          rgba(255, 255, 255, 0.9),
          rgba(255, 255, 255, 0.01) 70%,
          rgba(255, 255, 255, 0.001)
        );
        opacity: 0.5;
        -webkit-transform-origin: 50% -100%;
      }

      .particle {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: white;
        opacity: 0.5;
      }

    </style>
    <script>
      function Ray () {
        var that = this;

        this.el = document.createElement('div');
        this.el.className = 'ray';

        this.move();

        this.el.addEventListener('webkitTransitionEnd', function (e) { that.onTransitionEnd(e); });
        setTimeout(function () {
          that.move();
        }, 10);

      }

      Ray.prototype.onTransitionEnd = function (e) {
        this.move();
      };

      Ray.prototype.move = function () {
        var
          that = this,
          width = Math.random() * 150 + 5 + 'px',
          height = Math.random() * 30 + 90 + '%',
          opacity = Math.random() / 4,
          theta = Math.random() * 60 - 30;

        this.el.style.webkitTransitionDuration = Math.random() * 80 + 20 + 's';
        this.el.style.opacity = opacity;
        this.el.style.width = width;
        this.el.style.height = height;
        this.el.style.webkitTransform = 'rotate(' + ~~theta + 'deg) translate3d(0,0,0)';

      };

      function Particle () {
        var that = this;

        this.el = document.createElement('div');
        this.el.className = 'particle';

        this.move();

        this.el.addEventListener('webkitTransitionEnd', function (e) { that.onTransitionEnd(e); });

        setTimeout(function () {
          that.move();
        }, 10);
      }

      Particle.prototype.onTransitionEnd = function (e) {
        this.move();
      };

      Particle.prototype.move = function () {
        var
          that = this,
          bw = document.body.clientWidth,
          bh = document.body.clientHeight,
          bd = Math.max(bw,bh),
          x = -bw/2 + (Math.random() * bw * 2) + 'px',
          y = -bh/2 + (Math.random() * bh * 2) + 'px',
          z = -Math.random() * (bd*2),
          blur = 8 + ((bd+z)/bd) + 'px';

        this.el.style.webkitTransitionDuration = Math.random() * 80 + 20 + 's';

        this.el.style.webkitTransform = 'translate3d(' + x + ', ' + y + ', ' + z + 'px)';
        this.el.style.opacity = Math.random() * 0.8;
        this.el.style.boxShadow = '0px 0px ' + blur + ' 2px white';
      };

      window.addEventListener('DOMContentLoaded', function () {
        for (var p = 0; p < 50; p++) {
          var particle = new Particle();
          document.body.appendChild(particle.el);
        }

        for (var r = 0; r < 50; r++) {
          var ray = new Ray();
          document.body.appendChild(ray.el);
        }
      });
    </script>
  </head>
  <body>
    <!-- <div class="particle"></div> -->
    <!-- <div class="ray"></div> -->
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dust</title>
	<!-- Mobile -->
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<style>
	html, body {
	min-height: 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	body {
	background-image: -webkit-radial-gradient(50% -10%, #ddd, #888);
	-webkit-perspective: 800px;
	-webkit-transform-style: preserve-3d;
	overflow: hidden;
	}

	.ray {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 50px;
	height: 110%;
	background-image: -webkit-radial-gradient(50% -20%,
	rgba(255, 255, 255, 0.9),
	rgba(255, 255, 255, 0.01) 70%,
	rgba(255, 255, 255, 0.001)
	);
	opacity: 0.5;
	-webkit-transform-origin: 50% -100%;
	}

	.particle {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: white;
	opacity: 0.5;
	}

	</style>
	<script>
	function Ray () {
	var that = this;

	this.el = document.createElement('div');
	this.el.className = 'ray';

	this.move();

	this.el.addEventListener('webkitTransitionEnd', function (e) { that.onTransitionEnd(e); });
	setTimeout(function () {
	that.move();
	}, 10);

	}

	Ray.prototype.onTransitionEnd = function (e) {
	this.move();
	};

	Ray.prototype.move = function () {
	var
	that = this,
	width = Math.random() * 150 + 5 + 'px',
	height = Math.random() * 30 + 90 + '%',
	opacity = Math.random() / 4,
	theta = Math.random() * 60 - 30;

	this.el.style.webkitTransitionDuration = Math.random() * 80 + 20 + 's';
	this.el.style.opacity = opacity;
	this.el.style.width = width;
	this.el.style.height = height;
	this.el.style.webkitTransform = 'rotate(' + ~~theta + 'deg) translate3d(0,0,0)';

	};

	function Particle () {
	var that = this;

	this.el = document.createElement('div');
	this.el.className = 'particle';

	this.move();

	this.el.addEventListener('webkitTransitionEnd', function (e) { that.onTransitionEnd(e); });

	setTimeout(function () {
	that.move();
	}, 10);
	}

	Particle.prototype.onTransitionEnd = function (e) {
	this.move();
	};

	Particle.prototype.move = function () {
	var
	that = this,
	bw = document.body.clientWidth,
	bh = document.body.clientHeight,
	bd = Math.max(bw,bh),
	x = -bw/2 + (Math.random() * bw * 2) + 'px',
	y = -bh/2 + (Math.random() * bh * 2) + 'px',
	z = -Math.random() * (bd*2),
	blur = 8 + ((bd+z)/bd) + 'px';

	this.el.style.webkitTransitionDuration = Math.random() * 80 + 20 + 's';

	this.el.style.webkitTransform = 'translate3d(' + x + ', ' + y + ', ' + z + 'px)';
	this.el.style.opacity = Math.random() * 0.8;
	this.el.style.boxShadow = '0px 0px ' + blur + ' 2px white';
	};

	window.addEventListener('DOMContentLoaded', function () {
	for (var p = 0; p < 50; p++) {
	var particle = new Particle();
	document.body.appendChild(particle.el);
	}

	for (var r = 0; r < 50; r++) {
	var ray = new Ray();
	document.body.appendChild(ray.el);
	}
	});
	</script>
	</head>
	<body>
	<!-- <div class="particle"></div> -->
	<!-- <div class="ray"></div> -->
	</body>
	</html>