How to animate the cursor to the next new line and generate another new lines of characters in js /-CodePudding

I'd like to ask this question again, after all the mess I've written down 2 months ago.

The code below is showing an animation of letters. The ideal visual effect is that, once i hit into this page, there will be a black background and a white cursor, and it starts generating a line of random characters, one by one following the white cursor for the whole line. After that, the cursor will be on a new line below, and it will start generating a new line of random characters, in the same way as the previous line. Such process will go on and on by itself.

The problem is that, I don't know how to move the cursor to a new line below, and start the generation process for a new line of random characters.

Thanks for all of you who have helped me before, and thanks for all of you who would possibly help me out in the future! Thank you very much!

index.html:

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div id="container">
      <p id="text"></p>
  </div>
    <script src="script.js"></script>
  </body>
</html>

script.js:

const text = document.getElementById('text');
text.innerHTML  = create_random_string(15)   '<br>';

function create_random_string(string_length){
  var random_string = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  for (var i, i = 0; i < string_length; i  ) {
     random_string  = characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return random_string; 
}

var MyInterval = setInterval(NewLine, 21000);
function NewLine() {
  text.innerHTML  = create_random_string(15)   '<br>';
}

function StopNewLine() {
  clearInterval(MyInterval);
}
StopNewLine();

style.css:

body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  height: 100vh;
  width: 100vw;
}

#container {
  place-content: center;
  text-align: center;
  line-height: 6vh;
}

#text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 4vw;
  letter-spacing: 3vw;
  font-weight: bold;
  color: #ffffff;
  position: relative;
}

#text::before,
  #text::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  #text::before {
    background: #000000;
    animation: typewriter 20s steps(15) forwards;
  }

  #text::after {
    width: 0.125em;
    bottom: 1.5vh;
    Top: 1vh;
    background: #ffffff;
    animation: TypingBar 20s steps(15) forwards,
      blink 750ms steps(15) infinite;
  }

  @keyframes typewriter {
    0% {left: 0;}
    6.7% {left: 7vw;}
    100% {left: 90vw;}
  } 

  @keyframes TypingBar {
    0%, 6.7% {left: 8vw;}
    100% {left: 89.5vw;}
  }

  @keyframes blink {
    to {
      background: transparent;
    }
  }

CodePudding user response：

The animation is executed once for an element with id="text". What you can do is create a new element with id="text" on every function call, which will execute the animation for that element:

let divElem = document.getElementById('container');
function NewLine() {
  let text = document.createElement("p");
  text.setAttribute("id", "text");
  text.innerHTML = create_random_string(15)   '<br>'; 
  divElem.appendChild(text);
}

The only problem is a trailing blinking cursor at the end of the line, which I hid with opacity: 0;:

  @keyframes TypingBar {
    0%, 6.7% {left: 8vw;}
    99% {left: 89.5vw; opacity: 1;} /* escape fade-in effect */
    100% {opacity: 0;} /* hide trailing cursor */
  }

function create_random_string(string_length){
  var random_string = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  for (var i, i = 0; i < string_length; i  ) {
     random_string  = characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return random_string; 
}

let divElem = document.getElementById('container');
NewLine();

var MyInterval = setInterval(NewLine, 21000);
function NewLine() {
  let text = document.createElement("p");
  text.setAttribute("id", "text");
  text.innerHTML = create_random_string(15)   '<br>'; 
  divElem.appendChild(text);
}

function StopNewLine() {
  clearInterval(MyInterval);
}
//StopNewLine();

body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  height: 100vh;
  width: 100vw;
}

#container {
  place-content: center;
  text-align: center;
  line-height: 6vh;
}

#text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 4vw;
  letter-spacing: 3vw;
  font-weight: bold;
  color: #ffffff;
  position: relative;
}

#text::before,
  #text::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  #text::before {
    background: #000000;
    animation: typewriter 20s steps(15) forwards;
  }

  #text::after {
    width: 0.125em;
    bottom: 1.5vh;
    Top: 1vh;
    background: #ffffff;
    animation: TypingBar 20s steps(15) forwards,
      blink 750ms steps(15) infinite;
  }

  @keyframes typewriter {
    0% {left: 0;}
    6.7% {left: 7vw;}
    100% {left: 90vw;}
  } 

  @keyframes TypingBar {
    0%, 6.7% {left: 8vw;}
    99% {left: 89.5vw; opacity: 1;}
    100% {opacity: 0;}
  }

  @keyframes blink {
    to {
      background: transparent;
    }
  }

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div id="container">
      <p id="text"></p>
  </div>

  </body>
</html>