Dynamic writing effect of text

Question

I would like to use in a web project an effect that "writes" the text on the screen as if it were someone typing, pausally.

Like if the sentence is "Hello World," he’ll show:

Understand "|" as the writing cursor:

"The|"

And after about 0.2 seconds:

"OL|"
"OLA |"
"OLA M|"
"OLA MU|"
"OLA MUN|"

So on.

And then he’d go back to blacking out:

"OLA MUN|"
"OLA MU|"
"OLA M|"
"OLA |"

I don’t know what else to try, if you know the name of this effect warn, it should probably be with javascript and css, or some plugin.

Thanks for any help, thank you.

Answer 1

The effect is called Typewriter

Here’s a simple example with CSS only, each sentence character you want represents a animation:steps() as "Hello world!" has 10 characters you will need to steps(10) the same way according to the size of the sentence you need to adjust the width. Already the animations you use the @keyframes to make

html {
    height: 100%;
    overflow: hidden;
}
body {
      height: 100%;
      width: 100%;
      color: #fff;
      font-family: 'Anonymous Pro', monospace;
      background-color: black;
      display: flex;
}
.line {
      position: relative;
      width: 0px;
      margin: auto;
      border-right: 2px solid rgba(255, 255, 255, 0.75);
      font-size: 180%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;

}
/*Animação*/
.anim-typewriter {
      animation: typewriter 4s steps(9) 500ms infinite,
      blinkTextCursor 500ms steps(9) infinite normal;
}
@keyframes typewriter {
      0% {
            width: 0px;
      }
      10% {
            width: 0px;
      }
      25% {
            width: 160px;
      }
      75% {
            width: 160px;
      }
      90% {
            width: 0px;
      }
      100% {
            width: 0px;
      }
}
@keyframes blinkTextCursor {
      from {
            border-right-color: rgba(255, 255, 255, 0.75);
      }
      to {
            border-right-color: transparent;
      }
}

<p class="line anim-typewriter">Olá Mundo!</p>

If you want something more sophisticated with jQuery etc, I suggest these two options

Typewriterjs https://safi.me.uk/typewriterjs/

Typed.Js https://mattboldt.com/demos/typed-js/

This example I did using Typewriterjs also has the project link on Github https://github.com/tameemsafi/typewriterjs

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
    loop: true
});

typewriter.typeString('Olá Mundo!!!')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Seu texto está aqui')
    .pauseFor(2500)
    .deleteChars(9)
    .typeString('ou não...')
    .start();

body {
    font-family: sans-serif;
    font-size: 32px;
    color: red;
    text-align: center;
    margin-top:20px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://safi.me.uk/typewriterjs/js/typewriter.js"></script>

<div id="app"></div>

Answer 2

You already have a very good and practical response from @hugocsl about what libraries to use to achieve this, and also how to use them. However, in order to remain a reference as well, I show how I could implement something of this kind, albeit in a very simplified version.

Would need setInterval or setTimeout to be able to create timed actions, and at each step of time would add a text letter to the content of a <div> for example through textContent or innerHTML.

Example:

const resultado = document.querySelector(".conteudo");
const inputTexto = document.getElementById("texto");

document.getElementById("inserir").addEventListener("click", () => {
  let texto = inputTexto.value; //obter o texto do input a ser mostrado
  let letra = 0; //letra em que vai
  resultado.textContent = ""; //limpar o que estava escrito antes
  
  let timer = setInterval(() => {
    if (letra < texto.length){ //se ainda não chegou ao fim
      //escreve a letra e avança para a próxima
      resultado.textContent += texto[letra++]; 
    }
    else { //se chegou ao fim
      clearInterval(timer); //para a temporização
    }
  }, 200); //200 milisegundos entre cada letra
});

.cursor {
  color: #2E3D48;
  animation: 0.5s blink step-end infinite;
}

@keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

Texto a inserir: <input type="text" id="texto">
<button id="inserir">Inserir</button>
<div>
  <span class="conteudo"></span><span class="cursor">|</span>
</div>