{"id":850,"date":"2020-07-13T15:53:12","date_gmt":"2020-07-13T18:53:12","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=850"},"modified":"2022-12-09T08:20:32","modified_gmt":"2022-12-09T11:20:32","slug":"jquery-efeito-de-digitacao-animado-usando-o-exemplo-js-digitado-com-demo","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/jquery-efeito-de-digitacao-animado-usando-o-exemplo-js-digitado-com-demo\/","title":{"rendered":"Jquery – Efeito de digita\u00e7\u00e3o animado usando o exemplo js digitado com demo"},"content":{"rendered":"

Segue um tutorial de Jquery – Efeito de digita\u00e7\u00e3o animado usando o exemplo js digitado com demo<\/p>\n

 <\/p>\n

Hoje vamos aprender como fazer o efeito do texto digitado usando o plugin jquery em nosso site.\u00a0existem v\u00e1rios plugins dispon\u00edveis para diferentes tarefas ou efeitos, etc.<\/p>\n

\u00c0s vezes, podemos exigir um efeito de digita\u00e7\u00e3o animado, como m\u00e1quina de escrever com string, para um bom layout e o melhor efeito de interface gr\u00e1fica.<\/p>\n

Ent\u00e3o, voc\u00ea tamb\u00e9m pode fazer isso usando o c\u00f3digo jquery, mas se voc\u00ea usar o plugin jquery, poder\u00e1 fazer o melhor e sem perda de tempo. Portanto, voc\u00ea pode criar um efeito de texto digitado usando\u00a0plugin\u00a0typed.js<\/strong>\u00a0do jquery.<\/p>\n

Veja um exemplo simples<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Anim\u00e7ao digitando...<\/title>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"><\/script>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/cdn.bootcss.com\/typed.js\/1.1.4\/typed.min.js\"><\/script>\r\n    <style type=\"text\/css\">\r\n        .write{\r\n            font-size: 22px;\r\n        }\r\n        .container{\r\n            text-align: center;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"container\">\r\n    <span class=\"write\"><\/span>\r\n<\/div>\r\n\r\n\r\n<script type=\"text\/javascript\">\r\n    $(function(){\r\n        $(\".write\").typed({\r\n            strings: [\"Bem vindo ao site www.joemaster.com.br!\", \"Obrigado pela visita\"],\r\n            typeSpeed: 1,\r\n        });\r\n    });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n    \r\n<\/pre>\n


<\/center>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n
Veja os efeitos que pode ser alterados<\/p>\n
strings<\/p>\n
stringsElement<\/p>\n
typeSpeed<\/p>\n
startDelay<\/p>\n
backSpeed<\/p>\n
shuffle<\/p>\n
backDelay<\/p>\n
loop<\/p>\n
loopCount<\/p>\n
showCursor<\/p>\n
cursorChar<\/p>\n
attr<\/p>\n
contentType<\/p>\n
callback<\/p>\n
preStringTyped<\/p>\n
onStringTyped<\/p>\n
resetCallback<\/p>\n
Veja outros efeitos para fazer no site oficial.<\/p>\n
https:\/\/github.com\/mattboldt\/typed.js\/<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
Um efeito mais r\u00e1pido com JS puro seria.<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\r\n<\/head>\r\n<body>\r\n    <div id=\"log\"><\/div>\r\n    <script type=\"text\/javascript\">\r\n        var div = document.getElementById('log');\r\nvar texto = 'Hoje est\u00e1 um lindo dia!';\r\n\r\nfunction escrever(str, el) {\r\n  var char = str.split('').reverse();\r\n  var typer = setInterval(function() {\r\n    if (!char.length) return clearInterval(typer);\r\n    var next = char.pop();\r\n    el.innerHTML += next;\r\n  }, 100);\r\n}\r\n\r\nescrever(texto, div);\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
E pra terminar, mais um modelo, totalmente diferente, pra voc\u00ea ver que pode ser feito de v\u00e1rias formas.<\/p>\n
N\u00e3o importa o caminho, e sim o resultado<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\r\n<\/head>\r\n<body>\r\n\r\n    <span id=\"result\"><\/span><span id=\"pisca\">|<\/span>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n\r\n\r\nvar textox = \"Hello World modelo 2!!!\";\r\ntextox = textox + \"          \";\r\nvar result;\r\nvar volta ;\r\n\r\nvar count = 0;\r\nfunction digitar() {\r\n  result = document.getElementById(\"result\");\r\n  window.setTimeout(function() { inserir(textox[count]) }, 100);\r\n}\r\n\r\nfunction inserir(letra) {\r\n  result.innerHTML += letra;\r\n  count++;\r\n  if(count < textox.length){\r\n    window.setTimeout(function() { inserir(textox[count]) }, 100);}\r\n  else { retirar(); }\r\n\r\n}\r\n\r\nfunction retirar() {\r\n  result.innerHTML= textox.substr(0,count);\r\n  count--; \r\n  if(count >= 0) { window.setTimeout(function() { retirar();  }, 50);}\r\n  else { window.setTimeout(function() {count = 0; inserir(textox[count])},500); }\r\n}\r\n\r\n\r\n\r\n\r\nwindow.onload = digitar;\r\n\r\nwindow.setInterval(function() {document.getElementById(\"pisca\").innerHTML=\"|\";  }, 200);\r\nwindow.setInterval(function() { document.getElementById(\"pisca\").innerHTML=\" \"; }, 400);\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n