Como adicionar um efeito Digitação com JavaScript

Para você deixar seu site com aspecto de terminal!


Como adicionar um efeito Digitação com JavaScript


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.js

Apó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.


javascript


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!