ฝัง
- เผยแพร่เมื่อ 18 ธ.ค. 2024
- 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...
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 !!!
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.
Pow a pouco tempo atrás foi aniversário da origamid porque não aproveitou, conteúdo muito top.
Também comprarei na Black Friday, sempre quis comprar, mas acabei postergando muito.
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!
Jesus, de onde esse cara saiu? Ele é um semideus da explicação! Parabéns.
porra esse cara ensina de uma forma absurdamente simples de entender S2
Por isso me tornei aluno dele mesmo já tendo outros cursos, ele explica muito bem.
Muito muito bom, o cara ensina como se fosse a coisa mais simples do mundo, Parabéns
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/
MUITO BOM PARABENS ME AJUDOU MUITO
rapaz um dos melhores cursos que adquirir na vida foi o origamid
E pra quem nao entende nada?? Aprende ?
afe Maria, a meta é ficar bom desse jeito na programação kkk o cara explica sem esforço nenhum mano. muuuito obrigado pela aula!!!
Excelente vídeo
Você ensina muito bem, parabéns.
Da hora mesmo.
Parabéns cara uma aula uma didatica muito boa, sem complicar as coisas, vou comprar o vitalício.
Aguardando o curso de React Native :D
Top demais, o site deles e muito top também. Parabéns.
Muito show a aula, foi direto ao ponto ensinando um efeito top
Muito foda CARAIO! parabéns!!!
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.
Manoo Parabéns, melhor explicação!!!
Parabéns e obrigado!!!
muito bom! e como fazer quando tem junto nas letras para destacar a cor ? ele acaba renderizando as tags junto
Seu conteúdo é incrível!
Em breve irei me inscrever nos teus cursos!
Forte abraço!
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 ?
pow muito legal. VALEW. me ajudou muito.
excelente como sempre!
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 :)
Muito bom obggg! è possível fzr isso em loop? pra ele escrever e dps apagar?
Muito boa irmão parabéns mesmo
Thanks bro!
tô fazendo um site para um projeto da facul, ta ficando massa, vlw man! :D
deve ser muito dificil mecher com java script parabbens
Você é foda demais!! Parabéns!!
Ótimo!
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
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.
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 😃
Sinistro! 🔥🔥🔥
MUITO BOM !! aula top !!
Acho que acabei de aprender como faz animações básicas em css kkkkk.
nossa, muito bom! eu ainda vou comprar seu curso, algum dia kkkk
Ádrian Freitas Ferreira melhor curso meu rei!
Excelente aula parabéns - e como faz esse mesmo efeito, mas com correção, ou seja inserindo mais palavras ?
Muito show!
muito boa a aula,mas agora como faz para ela se apagar e escrever novamente?
Muito foda, vlw!
Fodaaa dms
Musica de entrada é do triplo bye bye bird?
Velho você é foooooooooooooda d+.
Parabéns André!!!
Ps: Responda minha dúvida no vídeo do MODAL fazendo favor.
perfeito!!
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.
Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou.
Q foda mano skakak
mano muito brabo, como eu coloco isso em LOOP ?
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.
ola como simular letras do teclado pressionadas automaticamente, quero que leia uma lista com notas musicais para tocar piano automaticamente, como criar isso ?
Estou muito tentado a comprar o curso mas é quase perfeito suas avaliações do Facebook e TH-cam tanto q parece fake ( estou pesquisando sobre vc , se continuar assim pode ter certeza vou comprar seu curso)
É que a empresa é pequena hehehe, geralmente o pessoal não tem muito ódio contra empresa pequena.
Como faço o inverso disso ? tipo, um efeito de apagar depois que chegar no fim do texto.
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..
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
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?
Eae cara, tudo bom? Teria como fazer um vídeo de como você monta seu Visual Studio Code? Tema / Extensões, Fontes, etc...?
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
@@Origamid Valeu parceiro
e o som de maquina de escrever como incluir?
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 ?
muito bom ,! eu só queria tentar colocar essa function callback e ficar repetindo infinitamente.
Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou.
Qual teme você usa no vscode ? achei bem elegante cansei do dracula kk.
É o meu mesmo, só buscar por Origamid nos plugins
Alguém sabe me dizer como eu faço pra animação começar a digitar a primeira palavra depois de uns 3 segundos?
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!
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
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 ?
Nice
alguem sabe se eu consigo aplicar isso no meu site wix?
Qual tema vc ta usando?
Não entendi, o body está dentro do head?
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?
Meu roda normal no meio do htm, mas coloco num arquivo js e importo ele no HTML, aparece erro... Pode me explicar
Eu não consigo pegar o elemento H1..
Bom dia Professor fiz, tudo da aula mas não funcionou, ele que o ''elemento' is null
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.
Origamid Deu certo meu amigo, o problema era que nao tava chamando a funçao
muito bomm cara, mas as minhas palavras ficaram tudo juntas uma das outras, mas o efeito funcionou normalmente.
Mano como eu faria se fosse pra apagar o texto e escrever novamente, isso fazendo ele ficar dando loop?
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.
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?
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!
Como e que faz pra eles volta a escrever sem ter que atualizar a pagina ??
Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou.
Cara realmente muito legal.
Como faz para de tempo em tempo reescrever o texto novamente ?
Valeu obrigado :)
Eu adicionei setTimeout(() => typeWriter(titulo),14000); ao final da função typeWriter e funcionou.
chame a função dentro de um setInterval. ex: setInterval(() => { typeWriter(titulo)}, 10000); cria um loop de 10seg.
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 ?
Qual nome do seu editor de texto?
Visual Studio Code !
@@danielmiranda7773 obrigado!
Olá pessoal!
Caso o texto não desapareça o início da animação, use...
elemento.innerHTML = '';
...antes de...
elemento.innerHTML * '';