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();
