Efeito de Máquina de Escrever com JavaScript

Como criar um efeito de máquina de escrever com JavaScript.
Arquivos: github.com/ori...
Utilize o for loop caso necessite de maior performance, como no arquivo final.
Mais cursos em: www.origamid.com/
Meu tema de VS Code: marketplace.vi...

[@jonathanmacedo2959]

Sensacional meu caro, sua didática é nota 1000!

[@ricardomirannda]

CaralhoOoOOOoo que aula fodástica !! Você ensinou algo que parecia extremamente complexo com uma simplicidade absurda !!! Cara assim que rolar promoção, Black Friday ou qualquer coisa do tipo vou comprar o Curso vitalício. Parabéns !!!

[@samuxui]

Eu garanto, comprei e estou amando. Sempre lança cursos novos e ele não cobra pelos cursos adicionais. O suporte dele também é muito bom.

[@brunosantanadev]

Pow a pouco tempo atrás foi aniversário da origamid porque não aproveitou, conteúdo muito top.

[@diegoi7]

Também comprarei na Black Friday, sempre quis comprar, mas acabei postergando muito.

[@hendrioevandro6578]

Mano sua aula está perfeita! Eu assisti outro vídeo que estava ensinando em css eu não entendi nada kkkkkkkkkkk agora a sua esta bem muito bem explicada, parabéns!

[@vicyoslinuxofficial2607]

Jesus, de onde esse cara saiu? Ele é um semideus da explicação! Parabéns.

[@fabioreis4711]

rapaz um dos melhores cursos que adquirir na vida foi o origamid

[@rainersilva7788]

E pra quem nao entende nada?? Aprende ?

[@FunctionDev]

porra esse cara ensina de uma forma absurdamente simples de entender S2

[@brunosantanadev]

Por isso me tornei aluno dele mesmo já tendo outros cursos, ele explica muito bem.

[@AlessandroJonas]

Muito muito bom, o cara ensina como se fosse a coisa mais simples do mundo, Parabéns

[@caiqueandrade9523]

afe Maria, a meta é ficar bom desse jeito na programação kkk o cara explica sem esforço nenhum mano. muuuito obrigado pela aula!!!

[@brunosantanadev]

Assisti o video 1 vez apenas e 5 horas depois apliquei aqui e advinha deu tudo certo kkk. Acho que sendo aluno dele ficou mais fácil de entender :) Me apeguei a didática dele \O/

[@NeccoChaves]

MUITO BOM PARABENS ME AJUDOU MUITO

[@tudoumpouco8045]

Parabéns cara uma aula uma didatica muito boa, sem complicar as coisas, vou comprar o vitalício.

[@pedrogomessantos647]

Excelente vídeo

[@ilustracode]

Muito show a aula, foi direto ao ponto ensinando um efeito top

[@d4mark114]

Você ensina muito bem, parabéns.

[@helio4327]

Top demais, o site deles e muito top também. Parabéns.

[@rafael98php]

Muito foda CARAIO! parabéns!!!

[@leandroalvesdasilva8415]

Da hora mesmo.

[@leonardo_lemos]

Seu conteúdo é incrível! Em breve irei me inscrever nos teus cursos! Forte abraço!

[@yurimatosrodrigues5337]

Parabéns e obrigado!!!

[@rodolfosantos7412]

Aguardando o curso de React Native :D

[@paulocesar-ui1kt]

excelente como sempre!

[@vitorsantos-sedesigner7549]

Manoo Parabéns, melhor explicação!!!

[@ByteMirage]

muito boa a aula,mas agora como faz para ela se apagar e escrever novamente?

[@walney2008]

ola como simular letras do teclado pressionadas automaticamente, quero que leia uma lista com notas musicais para tocar piano automaticamente, como criar isso ?

[@LucasGomes-yn2cm]

muito bom! e como fazer quando tem junto nas letras para destacar a cor ? ele acaba renderizando as tags junto

[@estevaolibardi]

Ótimo!

[@kuka742]

Aula foda. Meus parabens. Seria ideal trocar o innerHMTL pelo innerText, pois o innerHTML pega o estilo: como por exemplo se o text-align estiver como center, ele irá pegar as tabulações ocasionadas pelo estilo.

[@rodrigoa.558]

pow muito legal. VALEW. me ajudou muito.

[@LucasSilva-pe8gj]

Você é foda demais!! Parabéns!!

[@edvaldojunior3315]

Thanks bro! tô fazendo um site para um projeto da facul, ta ficando massa, vlw man! :D

[@renatosouzasantos4528]

deve ser muito dificil mecher com java script parabbens

[@marlonsouza2658]

Muito boa irmão parabéns mesmo

[@VulgoLG]

MUITO BOM !! aula top !!

[@inguinha1000]

Como faço o inverso disso ? tipo, um efeito de apagar depois que chegar no fim do texto.

[@brunodev3463]

Muito boa a aula. Semana passada eu acabei montando um script bem parecido, mas usei jquery e montei como um plugin. Mas só fiz, pois fiquei curioso de como você criou no seu site :)

[@ronaldsena9078]

Parabéns muito show _ Você consegue o efeito de fazer numero passar com na bomba de gasolina tipo saindo do numero 11 ate o numero 23 ?

[@chirlison]

Muito show!

[@rayanmarcus]

Sinistro! 🔥🔥🔥

[@empix_]

nossa, muito bom! eu ainda vou comprar seu curso, algum dia kkkk

[@brunoandrade5665]

Ádrian Freitas Ferreira melhor curso meu rei!

[@FRNathan13]

Acho que acabei de aprender como faz animações básicas em css kkkkk.

[@enzocosta8665]

Fodaaa dms

[@alexmeira2285]

Muito bom obggg! è possível fzr isso em loop? pra ele escrever e dps apagar?

[@RaphaEu-Mim]

e o som de maquina de escrever como incluir?

[@Breaking_Reds]

Meu roda normal no meio do htm, mas coloco num arquivo js e importo ele no HTML, aparece erro... Pode me explicar

[@samuxui]

Velho você é foooooooooooooda d+. Parabéns André!!! Ps: Responda minha dúvida no vídeo do MODAL fazendo favor.

[@gilbertomelo2773]

como seria no caso de querer usar várias palavras? tipo aparece escrevendo e depois apagando, dai escreve outra palavra e apaga.. e por ai vai..

[@J-BenAKAN]

Alguém sabe me dizer como eu faço pra animação começar a digitar a primeira palavra depois de uns 3 segundos?

[@vinicius29158]

perfeito!!

[@johncovv]

Muito foda, vlw!

[@Hellokeeper77]

Uau. Me ajudou demais. Fiquei com uma dúvida só. No meu teste usei uma class e no texto tenho duas tags . Como faço para que ele reconheça como tag e não como texto? Obrigado

[@fabriciobrazil8625]

Talvez você tenha achado a resposta, mas aqui vai: Tente usar ao invés de innerHTML o innerText, uma explicação detalhada neste link: cursos.alura.com.br/forum/topico-diferenca-entre-innerhtml-innertext-e-textcontent-96444#:~:text=innerText%20%2D%3E%20Retorna%20somente%20o%20texto,mas%20sem%20os%20elementos%20html.

[@gabrielgamaalves]

De uma forma bem simples, talvez vc pode, invez de utilizar o editar isso no css! Usando o font-weight daí vc coloca o valor que quiser ex: font-weight: 900; isso não dá certo quando a fonte é externa ex: Google-fonts daí para da certo vc tem que adicionar no link da font o valor (se não tiver) ex: Espero ter ajudado 😃

[@dev.vanderson]

Q foda mano skakak

[@leandro_adrian]

Como faço pro código começar a rodar depois de alguns segundos? Tipo, o usuário abre a página e só depois de 5 segundos começa a animação

[@JeffTinfel]

quero usar esse efeito em um pequeno texto, porém ele tem quebra de linha, como faço pra ele não ler o código de quebra de linha?

[@DioowSilva]

mano muito brabo, como eu coloco isso em LOOP ?

Excelente aula parabéns - e como faz esse mesmo efeito, mas com correção, ou seja inserindo mais palavras ?

[@joaoaugustodev]

Musica de entrada é do triplo bye bye bird?

[@ricardofahham79]

Usei para criar um página html com um texto maior para ajudar na leitura de textos, mas gostaria de colocar um botão de pause. Alguma dica ?

[@guilhermealonso3214]

Muito boa a aula, tava querendo aprender isso já faz um tempo... Só uma dúvida como que faço para fazer a escrita não parar, digo continuar com a animação, pode me ajudar, por favor? vlw.. e novamente excelente aula.

[@ddaniel1222]

Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou.

[@comentatoonvideos6618]

Estou muito tentado a comprar o curso mas é quase perfeito suas avaliações do Facebook e KZbin tanto q parece fake ( estou pesquisando sobre vc , se continuar assim pode ter certeza vou comprar seu curso)

[@Origamid]

É que a empresa é pequena hehehe, geralmente o pessoal não tem muito ódio contra empresa pequena.

[@felipegomes9204]

Fala André, comprei teu curso faz um tempo e tô na parte de SetTimeout e SetInterval. Depois de assistir as aulas resolvi treinar fazendo esse efeito de máquina de escrever. Queria saber pq quando eu uso o innerText o texto não vem com os espaços, mas quando eu uso o innerHTML ele vem com os espaços. Desde já agradeço.

[@pedromota3961]

Opa? Professor na função setTimeOut se multiplicarmos pelo ultimo numero do index (46 nesse caso) vamos ter 3450 milissegundos, mas vemos que todas as letras são printadas ao mesmo tempo!! o que ocorre que o forEach não acrescenta mais milisegundos na funcão mas sim divide e apresenta todas as letras no mesmo espaço de tempo?

[@eduardoj.santos1522]

alguem sabe se eu consigo aplicar isso no meu site wix?

[@rafaelrovira5537]

Boa tarde, eu criei um chatbot pelo dialogflow, eu gostaria que a mensagem que eu recebo do bot, tivesse esse efeito, eu tentei passar o parâmetro substituindo o H1, porém, sem sucesso, alguma dica ?

[@gentsu8112]

O unico problema q vi Foi q quandi coloca mais de type writer Ele escreve os 2 ao mesmo tempo inves de ser um de cada vez

[@Vinicius-lo2pj]

Nice

[@Danielmultilinguas]

Não entendi, o body está dentro do head?

[@kievy8205]

Qual teme você usa no vscode ? achei bem elegante cansei do dracula kk.

[@Origamid]

É o meu mesmo, só buscar por Origamid nos plugins

[@spartan3035]

Gente, eu gostaria de saber como eu posso colocar um áudio quando eu pressionar uma tecla Ex: R Alguém poderia me ajuda por favor?

[@tiagoribeirosantos3806]

muito bom ,! eu só queria tentar colocar essa function callback e ficar repetindo infinitamente.

[@ddaniel1222]

Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou.

[@darkyt488]

Como e que faz pra eles volta a escrever sem ter que atualizar a pagina ??

[@ddaniel1222]

Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou.

[@fabianoogoncalves]

Mano como eu faria se fosse pra apagar o texto e escrever novamente, isso fazendo ele ficar dando loop?

[@dev.leonardo]

chame a função e depois chame ela de novo dentro de um setInterval. Ai ela executa normal primeiro e depois repete de tempo em tempo. ex: setInterval(() => { typeWriter(titulo)}, 10000); cria um loop de 10seg.

[@mrbugbear9018]

Que aula do caralho, fazendo muito com quase nada de código, obrigado pela aula!! Eu tenho pouco conhecimento na área, repeti o exercício aqui porém com um texto maior só que não encontrei como aceitar a formatação sem mostrar por exemplo o ou na hora de exibir o texto, alguém saberia como? Tudo de bom!

[@ryanyuri980]

Eae cara, tudo bom? Teria como fazer um vídeo de como você monta seu Visual Studio Code? Tema / Extensões, Fontes, etc...?

[@Origamid]

Aqui eu tenho todas as extensões e configurações que uso atualmente. São diferentes desse vídeo: marketplace.visualstudio.com/items?itemName=origamid.origamid-next

[@ryanyuri980]

@@Origamid Valeu parceiro

[@pauloguizo]

Eu não consigo pegar o elemento H1..

[@gabriel_magão]

Qual tema vc ta usando?

[@DaviSilvaGuitar]

Bom dia Professor fiz, tudo da aula mas não funcionou, ele que o ''elemento' is null

[@Origamid]

Provavelmente está selecionando de forma errada o elemento. Em document.querySelector('h1'), você deve passar entre aspas o elemento que deseja animar, da mesma forma que você selecionaria via CSS.

[@DaviSilvaGuitar]

Origamid Deu certo meu amigo, o problema era que nao tava chamando a funçao

[@matthewsferreira9588]

muito bomm cara, mas as minhas palavras ficaram tudo juntas uma das outras, mas o efeito funcionou normalmente.

[@ailsonvarelodeoliveira]

Cara, show de código! Consegue fazer algo, para que essa função rode após uma determinada altura de scroll do navegador? Parabéns!

[@cyberlacs]

Cara realmente muito legal. Como faz para de tempo em tempo reescrever o texto novamente ? Valeu obrigado :)

[@ddaniel1222]

Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou.

[@dev.leonardo]

chame a função dentro de um setInterval. ex: setInterval(() => { typeWriter(titulo)}, 10000); cria um loop de 10seg.

[@danilorosa1737]

Ola, Primeiramente, parabens pelo video, muito bom. Me tira uma duvida, estou tentando escrever uma variavel em um campo da pagina. como se fosse escrever no campo de busca do google, tem algo ensinado a fazer isso ?

[@davidwilliam2615]

Qual nome do seu editor de texto?

[@danielmiranda7773]

Visual Studio Code !

[@davidwilliam2615]

@@danielmiranda7773 obrigado!

[@klosefstichfer9120]

Olá pessoal! Caso o texto não desapareça o início da animação, use... elemento.innerHTML = ''; ...antes de... elemento.innerHTML * '';