El fotogtwig clave aleatorio coloca cada iteración para crear un “código matricial” descendente

Estoy intentando hacer una página web HTML con clases de CSS animadas en muchos DIV independientes que se mueven a sus propias posiciones generadas aleatoriamente. Tengo 20 elementos con caracteres generados aleatoriamente que caen desde la parte superior de la página y se disipan a medida que se mueven a lo largo de su eje y (como el código Matrix).

EDITAR: Demostración de JsFiddle Recuerde que el rango es amplio, por lo que a veces el grupo de caracteres se genera a la derecha (fuera de la pequeña ventana de visualización)

Generando caracteres aleatorios en JavaScript superior

 $(document).ready(function() { }); function generateChar() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789«'¥~‹÷´`≠¡ˆ()][¶#@…•–!£$%&/?^*駰ç_:è+òàù,.-"; text = possible.charAt(Math.floor(Math.random() * possible.length)); return text; }  

HTML de 20 divs

 
...

JavaScript: Aquí he generado caracteres aleatoriamente (con éxito) pero solo 1 posición aleatoria. Todos los elementos comienzan en la misma posición en lugar de partir de sus propios puntos.

  document.getElementById("m1 ").innerHTML = generateChar(); ... document.getElementById("m20").innerHTML = generateChar(); var divs = document.getElementsByTagName("div"); for(var i = 0; i < divs.length; i++){ var xRandom = Math.round(Math.random() * 2000); var yBegRan = Math.round(Math.random() * 150); var yEndRan = Math.round(Math.random() * (2000 - 650) + 650); var secRan = Math.round(Math.random() * (20)); var style = document.documentElement.appendChild(document.createElement("style")), rule = " moveMinus {\ 0% {\ opacity: 1;\ }\ 100% {\ opacity: 0; \ }\ from {\ top: " + yBegRan + "px; left: " + xRandom + "px;\ }\ to {\ top: " + yEndRan + "px; left: " + xRandom + "px;\ }\ }"; if (CSSRule.KEYFRAMES_RULE) { style.sheet.insertRule("@keyframes" + rule, 0); } else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { style.sheet.insertRule("@-webkit-keyframes" + rule, 0); } divs[i].innerHTML = makeid(); }  

CSS

 .body-m{ background-color: black; overflow: hidden; } .movement{ position: absolute; font-size: 20px; color: limegreen; background-color: transparent; overflow: hidden; } @keyframes moveMinus { from { top: 0px; left: 21px; } to { top: 600px; left: 21px; } 0% { opacity: 1; } 100% { opacity: 0; } } .timeSpan{ animation: moveMinus 7s infinite; } 

¿Cómo itero correctamente a través de los estilos de los DIVs?

Hola, acabo de hacer este violín, Fiddle , no estoy seguro de que sea lo que querías, pero obtengo un resultado que puedes editar fácilmente =)

Aquí está la función principal:

 function setDiv(_div){ var xRandom = Math.round(Math.random() * 2000); var yBegRan = Math.round(Math.random() * 600); var yEndRan = Math.round(Math.random() * (2000 - 650) + 650); var secRan = Math.round(Math.random() * (20)) + 10; _div.style.opacity = 1; _div.style.top = yBegRan +"px"; _div.style.animationDuration = secRan +"s"; _div.style.left = xRandom + "px"; _div.innerHTML = generateChar(); } 
  function generateChar() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789«'¥~‹÷´`≠¡ˆ()][¶#@…•–!£$%&/?^*駰ç_:è+òàù,.-"; text = possible.charAt(Math.floor(Math.random() * possible.length)); return text; } var len = 500; var style = document.createElement("style"); document.body.appendChild(style); for (var i = 0; i < len; i++) { var xRandom = Math.round(Math.random() * 2000); var yBegRan = Math.round(Math.random() * 150); var yEndRan = Math.round(Math.random() * (2000 - 650) + 650); var secRan = Math.round(Math.random() * (20)); var rule = " moveMinus" + i +" {" + "0%{opacity: 1;top:" + yBegRan + "px; left:" + xRandom + "px;" + "}" + "100% {" + "opacity: 0;top:" + yEndRan + "px; left:" + xRandom + "px;" + "}}"; var div = document.createElement("div"); div.style.position = "absolute"; div.style.left = (Math.random() * window.innerWidth) + "px"; div.className = "timeSpan" + i; div.innerHTML = generateChar(); if (!("webkitAnimation" in document.body.style)) { style.textContent += "." + div.className +"{animation:moveMinus"+i+" "+Math.random() * 7 +"s infinite;}\n" +"@keyframes" + rule; } else { style.textContent += "." + div.className +"{-webkit-animation:moveMinus"+i+" "+Math.random() * 7 +"s infinite;}\n" +"@-webkit-keyframes" + rule; }; document.body.appendChild(div) } 
 .body-m { background-color: black; overflow: hidden; } /*Base Class*/ .movement { position: absolute; font-size: 20px; color: limegreen; background-color: transparent; overflow: hidden; } div { color:lime; }