Como fazer animação de texto digitado com Javascript | Typeitjs

Nos sites actuais de companhias e portifólios, é super comum ver a animação de digitação de texto em tempo real. Por isso resolvi trazer este tutorial com uma das mais completas bibliotecas para o efeito.
Biblioteca: www.typeitjs.com/

[@simaoz]

Muito obrigado, eu tinha feito o mesmo porém era 30 linhas de código e agora reduziu para 10 linhas, obrigado mesmo!

[@deivideguilherme]

Video sensacional amigo, obrigado por compartilhar seu conhecimento conosco!

[@LucasPaesMusic]

Fantástico, algumas linhas de código usando uma lib, me poupou uma penca de linhas de codigo em css e Js haha, vlw pelo video!

[@andersonnunes9545]

Muito obrigado, tentei fazer no javascript puro pois não conhecia essa biblioteca :3

[@josebarros582]

Muito bom. Obrigado

[@alexsa_neuropptech]

Ola, vc me salvou, esta logica era o que me faltava. Parabéns pela explicação e por deixar na descrição o type, merece vários likes, ganhou uma inscrita.

[@felipemelo9975]

muito bom😃

[@thenosyahsims]

Parabéns pelo video, muito bem explicado.

[@hugocosta6078]

Muito bom! Obrigado, estava procurando uma biblioteca assim.

[@danilobatistamateus7255]

TOP!

[@andersonnunes9545]

Como posso remover o cursor que acompanha a digitação do texto animado ?

[@rodolforodrigues1919]

Video sensacional, muito obg :)

[@brunno675]

muito obrigado!

[@CssDescomplicado]

Que bom que gostou.

[@macloudbackup6104]

Muito bom o video, Parabéns.... Ganhou mais um inscrito. Uma duvida, como faço para alterar o tamanho da palavra, por exemplo: "Eu sou programador JavaScript" só que o JavaScript eu gostaria que ficasse maior(fonte) do que o "Eu sou programador ". outro exemplo: "Eu sou programador" 20px. "JavaScript" 30px. desde já agradeço.

[@CssDescomplicado]

Olá, no elemento que tem a class animated você pode colocar uma outra classe que estiliza apenas esse span. Ex: Eu sou programador programador. No css, a class .big {font-size: 30px} Nota: Não testei, é possível que crie alguma interferência com os estilos da biblioteca. Testa e diga se funcionou

[@macloudbackup6104]

Meu codigo ficou assim: Deu certo o tamanho do texto porem o traço de digitação " | " ele fica abaixo do texto quando está digitando. **** HTML **** | | **** JavaScript **** | new TypeIt("#texto", { strings: 'Eu sou programador programador', speed: 180, waitUnilVisible: true, }).go(); | **** e no CSS criei a class BIG **** | .big { font-size: 30px; }

[@CssDescomplicado]

Vou testar e tentar acertar.

[@henoque4313]

Eu coloquei a biblioteca como no video mas quando faço o deploy para o firebase o texto não aparece mais.

[@CssDescomplicado]

É difícil saber qual é o problema causando isso na sua aplicação mas esse não é um problema comum. Infelizmente não tenho a solução para a sua dificuldade.

[@henoque4313]

@@CssDescomplicado eu depois de um tempo consegui resolver eu apaguei os outros deploy que fiz da mesma página e resolveu.

[@guilhermenogueira9579]

Obrigadooooooo muito bom