Estoy creando una web y necesito hacer que un texto:
- Se escriba con un efecto como de máquina de escribir.
- Cuando ya termine de escribir debe permanecer el texto escrito por unos tres segundos.
- Y por último debe desaparecer el texto y volver a escribirse con el efecto de máquina de escribir y así sucesivamente.
El efecto ya tengo hecho con JavaScript y ya logré que se repita pero lo hace inmediatamente sin hacer la pausa de 3 segundos. Si alguien me puede ayudar, ¿qué es lo que me falta?.
El código que tengo es:
$(function(){
var texto = "Texto Ejemplo / Ejemplo 2 / Ejemplo 3";
maquina("typer",texto,100);
});
function maquina(contenedor,texto,intervalo){
// Calculamos la longitud del texto
longitud = texto.length;
// Obtenemos referencia del div donde se va a alojar el texto.
tagHtml = document.getElementById(contenedor);
tagHtml.innerHTML="";
var i=0;
// Creamos el timer
timer = setInterval(function(){
// Vamos añadiendo letra por letra y la _ al final.
tagHtml.innerHTML = tagHtml.innerHTML.substr(0,tagHtml.innerHTML.length-1) + texto.charAt(i) + "_";
// Si hemos llegado al final del texto..
if(i >= longitud){
// Salimos del Timer y quitamos la barra baja (_)
clearInterval(timer);
tagHtml.innerHTML = tagHtml.innerHTML.substr(0,longitud);
maquina("typer",texto,100);
return true;
} else {
// En caso contrario.. seguimos
i++;
}
},intervalo);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<p id="typer"></p>
</body>