Jquery – Efeito de digitação animado usando o exemplo js digitado com demo


Segue um tutorial de Jquery – Efeito de digitação animado usando o exemplo js digitado com demo

 

Hoje vamos aprender como fazer o efeito do texto digitado usando o plugin jquery em nosso site. existem vários plugins disponíveis para diferentes tarefas ou efeitos, etc.

Às vezes, podemos exigir um efeito de digitação animado, como máquina de escrever com string, para um bom layout e o melhor efeito de interface gráfica.

Então, você também pode fazer isso usando o código jquery, mas se você usar o plugin jquery, poderá fazer o melhor e sem perda de tempo. Portanto, você pode criar um efeito de texto digitado usando plugin typed.js do jquery.

Veja um exemplo simples

<!DOCTYPE html>
<html>
<head>
    <title>Animçao digitando...</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/typed.js/1.1.4/typed.min.js"></script>
    <style type="text/css">
        .write{
            font-size: 22px;
        }
        .container{
            text-align: center;
        }
    </style>
</head>
<body>


<div class="container">
    <span class="write"></span>
</div>


<script type="text/javascript">
    $(function(){
        $(".write").typed({
            strings: ["Bem vindo ao site www.joemaster.com.br!", "Obrigado pela visita"],
            typeSpeed: 1,
        });
    });
</script>

</body>
</html>
    


 

 

Veja os efeitos que pode ser alterados

strings

stringsElement

typeSpeed

startDelay

backSpeed

shuffle

backDelay

loop

loopCount

showCursor

cursorChar

attr

contentType

callback

preStringTyped

onStringTyped

resetCallback

Veja outros efeitos para fazer no site oficial.

https://github.com/mattboldt/typed.js/

 

 

Um efeito mais rápido com JS puro seria.

 

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div id="log"></div>
    <script type="text/javascript">
        var div = document.getElementById('log');
var texto = 'Hoje está um lindo dia!';

function escrever(str, el) {
  var char = str.split('').reverse();
  var typer = setInterval(function() {
    if (!char.length) return clearInterval(typer);
    var next = char.pop();
    el.innerHTML += next;
  }, 100);
}

escrever(texto, div);
    </script>
</body>
</html>


E pra terminar, mais um modelo, totalmente diferente, pra você ver que pode ser feito de várias formas.

Não importa o caminho, e sim o resultado

<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <span id="result"></span><span id="pisca">|</span>

<script type="text/javascript">



var textox = "Hello World modelo 2!!!";
textox = textox + "          ";
var result;
var volta ;

var count = 0;
function digitar() {
  result = document.getElementById("result");
  window.setTimeout(function() { inserir(textox[count]) }, 100);
}

function inserir(letra) {
  result.innerHTML += letra;
  count++;
  if(count < textox.length){
    window.setTimeout(function() { inserir(textox[count]) }, 100);}
  else { retirar(); }

}

function retirar() {
  result.innerHTML= textox.substr(0,count);
  count--; 
  if(count >= 0) { window.setTimeout(function() { retirar();  }, 50);}
  else { window.setTimeout(function() {count = 0; inserir(textox[count])},500); }
}




window.onload = digitar;

window.setInterval(function() {document.getElementById("pisca").innerHTML="|";  }, 200);
window.setInterval(function() { document.getElementById("pisca").innerHTML=" "; }, 400);
    </script>
</body>
</html>


Categoria: javascript | Tags: , , | Postado por joemaster em 13/jul/2020

<< Anterior

Próximo >>

Deixe um comentário

O seu endereço de e-mail não será publicado.