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>
<< Anterior Como criar uma lista pra procurar emojis no seu site
Deixe um comentário