Dynamic writing effect of text

Question

Dynamic writing effect of text

Navigation

#1 by (5 votes)
#2 by (2 votes)

2

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

Type if the sentence is "Hello world" it will show:

Understand the "|" as the writing cursor:

"O |"

And after about 0.2 seconds:

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

So on.

And then he would go out again:

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

I do not know what to try, if they know the name of this effect, they should probably be with javascript and css, or some plugin.

Thanks in advance for any help, thank you.

javascript html jquery css

asked by anonymous 10.04.2018 / 02:31

2 answers

Function prints list while Find consecutive numbers in a string in C #

score 5 · Answer 1

The effect is called typewriter

Here's a simple example with only CSS, each character of the phrase you want represents animation:steps() like "Hello world!" has 10 characters you will need steps(10) in the same way according to the size of the phrase you need to adjust the width . Since the animations you use @keyframes to do

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 link

Typed.Js link

This example I made using TypewriterJS also has the project link in GitHub link

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><scriptsrc="https://safi.me.uk/typewriterjs/js/typewriter.js"></script>

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

score 2 · Answer 2

You already have a pretty good @hugocsl answer about what libraries to use to achieve this effect, and how to use them. However in order to be a reference as well, I show you how I could implement something like this, albeit in a very simplified version.

I would need setInterval or setTimeout to be able to create timed actions, and at each step of time would add a letter of the text to the content of <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>