Programando Juntos

Construa o seu futuro na programação, passo a passo!

Typed.JS – Tutorial – PT-BR

por · Published · Updated

Como Utilizar a Biblioteca Typed.js: Tutorial Completo

Typed.js: Tutorial Completo

Introdução: Olá, programadores! Sou Leandro Castro e hoje vou ensinar a vocês como utilizar a biblioteca Typed.js para criar animações de digitação em seus projetos. Aprenda a criar efeitos incríveis para seus textos com facilidade.

Vídeo: Typed.js: Tutorial Completo

Apresentando a Biblioteca Typed.js:

A biblioteca Typed.js é uma poderosa ferramenta para criar animações de digitação em tempo real. Adicione um toque especial ao seu site com esse efeito de digitação cativante. Acesse o link oficial da biblioteca e descubra todas as possibilidades.

Instalação:

Comece criando um arquivo index.html vazio e insira a estrutura básica. Em seguida, adicione a biblioteca Typed.js no início do arquivo utilizando o seguinte código:

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

Utilização:

Agora vamos utilizar a biblioteca no nosso projeto. É simples! Primeiro, crie um elemento onde o texto animado será exibido, utilizando a tag <span> e atribuindo um ID único:

<span id="meuTextoPersonalizado"></span>

Em seguida, vincule a biblioteca ao elemento criado e defina o texto a ser exibido. Veja o exemplo abaixo:

<script>
    var typed = new Typed('#meuTextoPersonalizado', {
        strings: ['Curta o vídeo', 'Se inscreva no canal'],
        typeSpeed: 50,
    });
</script>

Personalização:

A biblioteca Typed.js oferece diversas opções de personalização. Você pode customizar o texto diretamente na instância da biblioteca utilizando tags HTML. Experimente adicionar suas próprias tags e veja o resultado!

Propriedades Interessantes

Além disso, existem outras propriedades que você pode explorar para aprimorar suas animações:

  • typeSpeed: Define a velocidade de digitação do texto (em milissegundos).
  • backSpeed: Define a velocidade de apagamento do texto (em milissegundos).
  • showCursor: Controla a exibição do cursor na animação (true/false).
  • cursorChar: Permite personalizar o caractere exibido como cursor.

Conclusão:

A biblioteca Typed.js é altamente personalizável e oferece infinitas possibilidades de criação. Se você deseja aprender mais sobre as propriedades e recursos dessa biblioteca, deixe um comentário para que eu possa preparar um vídeo complementar.

Agradecimentos:

Se este conteúdo foi útil para você, deixe seu like e compartilhe com seus amigos programadores. Inscreva-se no canal para acompanhar nossos próximos vídeos e descobrir mais recursos incríveis para aprimorar seus projetos web. Agradecemos seu apoio e esperamos vê-lo em breve!

Você pode gostar...