Um efeito de digitação, também conhecido como “efeito console/terminal”, é uma técnica de animação em que o texto aparece na tela como se estivesse sendo digitado, caracter por caractere, em vez de aparecer instantaneamente.
Esse efeito é comumente usado em aplicativos, sites e apresentações para criar uma sensação de interação ou para chamar a atenção do espectador para o texto sendo exibido.
Para adicionar esse efeito ao seus projetos usando JavaScript é muito simples usando uma biblioteca pronta: Typed.js!
Instalação
Você pode instalar via NPM, Yarn ou Bower:
# Com NPM
npm install typed.js
# Com Yarn
yarn add typed.js
# Com Bower
bower install typed.jsApós isso basta usar esse código para chamar o Typed.js:
var typed = new Typed('.element', {
strings: ["First sentence.", "Second sentence."],
typeSpeed: 30
});
Exemplo via CDN
Nesse exemplo básico veremos como implementar de forma bem fácil e rápida o Typed.js via CDN.
Basta criar um arquivo exemplo: index.html e adicionar o conteúdo abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
</head>
<body>
<span id="element"></span>
<script>
var typed = new Typed('#element', {
strings: ['<i>Esse é meu efeito</i> DIGITAÇÃO.', 'Isso é bacana! =)'],
typeSpeed: 50,
});
</script>
</body>
</body>
</html>Depois abra no seu navegador preferido esse arquivo e veja o efeito funcionando!
Para mais informações acesse o Site oficial do Typed.js.
