What else should I add/deduce from the code of animation?-CodePudding

It's another question on animation in JS / CSS.

I'd like to ask how should I correct the code in JavaScript, in order to achieve the visual effect that, after a screen full of random characters, all the lines of random characters will disappear, with only the black background, while a new line of random characters starts generating at the top of the screen? I thought it would be a solution that, after the characters in the div element fill up the whole screen, the height can be a reference to trigger the function of .removeChild(), in order to remove the appended p elements. After that, by .appendChild() it will start the generation process again at the top of the screen. If not so, Is there any other ways to do it?

Thank you very much!

Code:

function create_random_string(string_length) {
  var random_string = '';
  var characters = 'ABCDEFGabcdefg';

  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, 11000);

function NewLine() {
  let text = document.createElement("p");
  text.setAttribute("id", "text");
  text.innerHTML = create_random_string(15);
  divElem.appendChild(text);
}

function RemoveChild() {
  if (divElem.clientHeight > window.innerHeight) {
    while (divElem.firstChild) {
      divElem.removeChild(divElem.firstChild)
    };
  }
}

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: 7.5vh;
}

#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 10s steps(15) forwards;
}

#text::after {
  width: 0.125em;
  bottom: 0vh;
  Top: 0vh;
  background: #ffffff;
  animation: TypingBar 10s 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.99% {
    left: 89.5vw;
    opacity: 1;
  }
  /* escape fade-in effect */
  100% {
    opacity: 0;
  }
  /* hide trailing cursor */
}

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

<body>
  <div id="container">
    <p id="text"></p>
  </div>
</body>

CodePudding user response：

function create_random_string(string_length) {
  var random_string = '';
  var characters = 'ABCDEFGabcdefg';

  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, 11000);

function NewLine() {
  RemoveChild();
  let text = document.createElement("p");
  text.setAttribute("id", "text");
  text.innerHTML = create_random_string(15);
  divElem.appendChild(text);
}

function RemoveChild() {
  if (divElem.clientHeight > window.innerHeight) {
    divElem.innerHTML ="";
  }
}

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: 7.5vh;
}

#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 10s steps(15) forwards;
}

#text::after {
  width: 0.125em;
  bottom: 0vh;
  Top: 0vh;
  background: #ffffff;
  animation: TypingBar 10s 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.99% {
    left: 89.5vw;
    opacity: 1;
  }
  /* escape fade-in effect */
  100% {
    opacity: 0;
  }
  /* hide trailing cursor */
}

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

<body>
  <div id="container">
    <p id="text"></p>
  </div>
</body>