0

El efecto que busco lograr es el de un texto que pareciera tener interferencia. El texto está contenido en un div con id "matter". Con la siguiente función llegué a obtener un array en el que cada elemento corresponde a cada letra del texto (son 1493, sin espacios).

function matrix () {
var fileContents = document.getElementById("matter");
fileContents.innerText = text;
let texto = [...text];
let array = texto.filter(function(str) {
    return /\S/.test(str);
});
let random = parseInt(Math.random()*1493+1);
let letras = array[random];
console.log(letras);}

Lo que no sé cómo hacer es obtener sus propiedades para hacerlas aparecer y desaparecer. El background del body es negro y las letras son de color blanco. Tendría que escribir una función que haga "parpadear" letras de manera aleatoria (es decir, volverla negras y blancas nuevamente).

2

1 respuesta 1

1

En lugar de cambiar a color a negro bien podrías cambiar algunas letras por un espacio no separable (nbsp):

  var e = document.getElementById("matter");
  var text = e.innerText;
  var interval = setInterval(matrix,200);
  function matrix () {
    let str = '';
    for(var i=0; i < text.length; i++){
      str += ( Math.random() >= 0.5 ? text.charAt(i) : '\xa0');
    }
    e.innerText = str;
  }
    #matter{background-color: black; color:white; font-family: monospace;}
<html>
<body>
  <div id="matter">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</body>
</html>

1
  • No, porque quiero que sea progresiva el cambio.
    – Sancaf
    el 6 mar. 2020 a las 13:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.