Francisco Chaves

Francisco Chaves

Software Developer. Entusiasta Linux.

© 2020

Modo escuro

Efeito de máquina de escrever com JavaScript

Efeito de máquina de escrever com JavaScript

Olá pessoal, eu sempre achei aquele efeito de máquina de escrever bem interessante, então hoje vou apresentar esse efeito utilizando JavaScript.

Visualize o Pen Efeito Máquina de escrever feito por Francisco Chaves (@franciscochaves) em CodePen.

Deixo o código fonte abaixo para quem quiser utilizá-lo, fiquem a vontade para compartilhar.

Código HTML:

<!-- HTML -->

<main>
  <section class="typing">
    <p id="text"></p>
  </section>
</main>

Código CSS:

/* CSS */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

*{
  margin: 0 auto;
  padding: 0;
}

.typing {
  font-family: 'Special Elite', cursive;
  font-size: 2em;
  padding: 1em;
}

Código JS:

// JS

var content = 'Francisco Chaves. Tecnologia com bits codificados.';
var text = document.getElementById('text');

var speed = 190;
var cont = 0;

function typeWriter () {
  if(cont < content.length){
    text.textContent += content.charAt(cont);
    cont++;
    setTimeout(typeWriter, speed);
  }else{
    text.textContent = '';
    cont = 0;
    typeWriter();
  }
}

typeWriter();
×

Inscreva-se para novas atualizações