1 <script type="text/javascript">2 3 function r(m) {4 return (m*Math.random()).toFixed(0);5 };6 7 function c() {8 return r(1)*255; 9 }10 11 var Box = function(dom) {12 this.dom = dom;13 this.dom.setAttribute('data-component', 'box');14 };15 16 Box.prototype.start = function() {17 18 var s = r(20)+0;19 20 this.dom.style.width = s + 'px';21 this.dom.style.height = s + 'px';22 23 this.dom.style.left = r(screen.width - s) + 'px';24 this.dom.style.top = r(screen.height - s) + 'px';25 26 this.dom.style.backgroundColor = 'rgba('+c()+','+c()+','+c()+', '+(r(10)/10)+')';27 28 var that = this;29 var t = r(2000);30 setTimeout(function() {31 that.dom.style.transition = 'all '+(t/1000)+'s ease';32 that.start(); 33 }, t);34 };35 36 var boxes = document.querySelectorAll('[data-component="box"]');37 38 for (var i=0; i<boxes.length; i++) {39 var box = new Box(boxes[i]);40 box.start();41 }42 43 for (var i=0; i<r(100); i++) {44 var div = document.createElement('div');45 document.body.appendChild(div);46 var box = new Box(div);47 box.start();48 }49 50 51 52 </script>
Enlace
El enlace para compartir es: