Efeito de Máquina de Escrever com JavaScript

Como criar um efeito de máquina de escrever com JavaScript.

Arquivos: https://github.com/origamid/publico/tree/main/efeito-de-maquina-de-escrever-com-javascript

Utilize o for loop caso necessite de maior performance, como no arquivo final.

Mais cursos em: https://www.origamid.com/

Meu tema de VS Code: https://marketplace.visualstudio.com/items?itemName=origamid.origamid-theme

Source: Origamid

69 Comentários:

Ricardo Miranda: 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 !!! ( 43 Likes).

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

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

D4 Mark: Você ensina muito bem, parabéns..

ilustraCode – Programação Web: Muito show a aula, foi direto ao ponto ensinando um efeito top.

Bruno Dev: 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 :).

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

felipe gomes: 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..

Régis Adamavicius: Excelente aula parabéns – e como faz esse mesmo efeito, mas com correção, ou seja inserindo mais palavras ?.

Lucas Giovanni: MUITO BOM !! aula top !!.

BRUNO SANTANA: 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/.

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

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

luka rocha: 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..

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

paulo cesar: excelente como sempre!.

Marlon Souza: Muito boa irmão parabéns mesmo.

Vitor Santos – SeDesigner: Manoo Parabéns, melhor explicação!!!.

Mr Bugbear: 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!.

Pedro Mota: 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?.

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

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

Edvaldo Junior: Thanks bro! tô fazendo um site para um projeto da facul, ta ficando massa, vlw man! 😀 ( 1 Likes).

Ádrian Empix: nossa, muito bom! eu ainda vou comprar seu curso, algum dia kkkk.

Yuri Matos Rodrigues: Parabéns e obrigado!!!.

Nathan Ferreira: Acho que acabei de aprender como faz animações básicas em css kkkkk. ( 17 Likes).

Vinicius Rodrigues: perfeito!!.

estevaolibardi: Ótimo!.

Rodrigo Bastos: 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 ( 1 Likes).

  • fabricio brazil: Talvez você tenha achado a resposta, mas aqui vai: Tente usar ao invés de innerHTML o innerText, uma explicação detalhada neste link:

    https://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..

  • Gabriel Gama: 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 .

Rafael Rovira: 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 ?.

Guilherme Alonso: 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..

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

Ryan Yuri: 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:

    https://marketplace.visualstudio.com/items?itemName=origamid.origamid-next ( 1 Likes).

  • Ryan Yuri: @Origamid Valeu parceiro.

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

  • Daniel Oliveira: Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou..
  • Leonardo Martins: chame a função dentro de um setInterval. ex: setInterval(() => { typeWriter(titulo)}, 10000); cria um loop de 10seg..

Ricardo Fahham: 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 ?.

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

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.

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

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

  • Daniel Oliveira: Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou. ( 1 Likes).

Lucas Silva: Você é foda demais!! Parabéns!!.

SPARTAN303: 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?.

Rayan Marcus: Sinistro! .

Rodolfo Santos: Aguardando o curso de React Native 😀 ( 4 Likes).

Jeff Tinfel: 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?.

Chirlison Souza: Muito show!.

Rafael Belchior: Muito foda CARAIO! parabéns!!!.

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

Ailson Varelo: 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!.

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

John Covv: Muito foda, vlw!.

Gilberto Melo: 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.. ( 1 Likes).

Rodrigo A.: pow muito legal. VALEW. me ajudou muito..

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

  • Origamid: É que a empresa é pequena hehehe, geralmente o pessoal não tem muito ódio contra empresa pequena. ( 4 Likes).

Pogramador cum Café: E se meu texto tiver um link? Testei aqui e ele leu o HTML, tipo

Function Dev: porra esse cara ensina de uma forma absurdamente simples de entender S2.

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

Gentsu: 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 ( 1 Likes).

Fabio Reis: rapaz um dos melhores cursos que adquirir na vida foi o origamid.

Enzo Costa: Fodaaa dms.

Gabriel Pedro: Qual tema vc ta usando?.

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

  • Origamid: É o meu mesmo, só buscar por Origamid nos plugins ( 1 Likes).

phbs: como faço para adicionar links ? quando coloquei ele não le como link.

Eduardo J. Santos: alguem sabe se eu consigo aplicar isso no meu site wix?.

Sluucke: Qual nome do seu editor de texto?.

Daniel Castro: Não entendi, o body está dentro do head?.

Vinicius: Nice.

pauloguizo: Eu não consigo pegar o elemento H1…

João Luís Ribeiro: Musica de entrada é do triplo bye bye bird?.

Deivdi Lisboa: Como e que faz pra eles volta a escrever sem ter que atualizar a pagina ??.

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

Davi Silva: 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..
  • Davi Silva: Origamid Deu certo meu amigo, o problema era que nao tava chamando a funçao.

Fabiano Gonçalves: Mano como eu faria se fosse pra apagar o texto e escrever novamente, isso fazendo ele ficar dando loop?.

  • Leonardo Martins: 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. ( 3 Likes).

ATENÇÃO: Os comentários não correspondem a opinião do proprietário deste site e foram extraídos de forma automática. Este artigo não possui fim comercial e tem por objetivo apenas o estudo da tecnologia Selenium. Caso algum comentário aqui presente seja abusivo ou fira alguma lei, favor nos informar para que possamos removê-lo o mais rápido possível.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Sair da versão mobile