3

pues verán, estoy creando un título con el efecto máquina de escribir. De entrada estoy utilizando este código porque de aquí tomé la idea, sin embargo, abrí otro hilo porque mi duda varía a la de la persona que publicó ese hilo.

Estamos ubicados en:

Necesito que:

1.- Una vez escrito el texto, se elimine con el mismo afecto antes de cambiar al otro texto a mostrar.

2.- Personalizar un array de texto. Puede ser N número de textos los que necesito agregar. Cuando se termine de escribir y borrar un texto ahora se pase a otro y así N cantidad de veces. Por ejemplo: México, Chile, Perú, Ecuador. etc.

El hilo es este: Realizar efecto máquina de escribir con pausa

Y mi código actual es este, sin embargo hace cosas extrañas :(

$(function(){
	var n =0;	
	 var texto = "México";
	 maquina("typer",texto,250,0);
	});
  
  function maquina(contenedor,texto,intervalo,n){
	var i=0,
 	// Creamos el timer
 	timer = setInterval(function() {
 	if ( i<texto.length ) {
		// Si NO hemos llegado al final del texto..
		// Vamos añadiendo letra por letra y la _ al final.
		$("#"+contenedor).html(texto.substr(0,i++) + "_");
	} else {
		timer = setInterval(function() {
	   		if ( texto.length < i ) {
				$("#"+contenedor).html(texto.substr(0,i--) + "_");
		  	}else{
		  		clearInterval(timer);
			  	$("#"+contenedor).html(texto);
			   	// Auto invocamos la rutina n veces (0 para infinito)
		  	}
	  	}, intervalo);
	}

    if ( --n!=0 ) {
    	setTimeout(function() {
    	maquina(contenedor,texto,intervalo,n);
    	},3600);
   	}
 },intervalo);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="title"  >Estamos ubicados en: <span id="typer"></span></h1>

Gracias de antemano. Un abrazo.

2
  • A que te refieres que se elimine con el mismo efecto? Que se vaya eliminando letra a letra hasta no quedar nada?
    – lDanny7
    el 27 abr. 2018 a las 7:57
  • Si exacto, a eso mero me refiero. el 27 abr. 2018 a las 8:01

2 respuestas 2

1

Creo que tienes muchos timeout en el código por lo he modificado un poco:

$(function(){

  var listaTexto = ["Mexico", "Prueba", "Limpiar", "StackOverFlow"]  
  maquinaLista("typer",250,listaTexto,0);
  
  function maquinaLista(contenedor, intervalo, listaTexto, indice){      
	if (indice == listaTexto.length){
        indice = 0;
    }
     maquina2(contenedor, listaTexto[indice], intervalo, listaTexto, indice);	
  }
  
  function maquina2(contenedor, texto, intervalo, listaTexto, indiceLista){
  var indiceTexto = 0;
  var finalTexto = false;
  timer = setInterval( function(){			  
	if (indiceTexto == texto.length && finalTexto == false){
		finalTexto = true;			
	}
			
	if (finalTexto == false) indiceTexto++
	else indiceTexto--;
	mostrarEliminarTexto(contenedor, texto, indiceTexto, finalTexto);
	if (finalTexto == true && indiceTexto == 0){
		clearInterval(timer);
		maquinaLista(contenedor, intervalo, listaTexto, indiceLista+1);
	}		
  },intervalo)
  }	 
  
  function mostrarEliminarTexto(contenedor, texto, i, finalTexto){

if (finalTexto){
	$("#"+contenedor).html(texto.substr(0,i--) + "_");
}
else{
	$("#"+contenedor).html(texto.substr(0,i++) + "_");
}
  }
  
  
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="title"  >Estamos ubicados en: <span id="typer"></span></h1>

Añado la variable finalTexto para saber en que momento hemos terminado de mostrar el texto para ir restando el indice. Luego se hace la siguiente comprobación:

if (finalTexto == true && indice == 0){

Esto sirve para detener el setInterval, ya que hemos recorrido la palabra entera.

He editado la respuesta para añadir la lista de texto y limpiar un poco las funciones.

Espero que te sirva.

3
  • ¿En que parte tengo que repetir este if para que el bucle sea infinito? es decir, después de mostar "StackOverFlow" se repita nuevamente el primer texto que sería "México" if ( --n!=0 ) { setTimeout(function() { maquina(contenedor,texto,intervalo,n); },3600); } el 27 abr. 2018 a las 18:17
  • Ya he editado el código para que sea infinito, y si te ha servido marcalo como respuesta, y creo que tendrías que dar un voto al compañero que dio su respuesta, ya que ha sido valida tmb
    – lDanny7
    el 27 abr. 2018 a las 22:12
  • Claro que si, muchas gracias a ambos, son geniales. el 27 abr. 2018 a las 22:29
1

He reducido un poco tu código quitando uno de los timers y haciendo un acercamiento algo más matemático/lógico: El concepto trata sobre que cuando llega al final, cambia de sentido. Para contar las iteraciones mira si el número de veces que ha escrito un carácter es mayor a la doble longitud de la palabra (ida y vuelta).

Funciona bien para una iteración, pero algo se me escapa puesto que con cada iteración adicional imprime un carácter de más en una última iteración.

$(function(){
	 var n =0;	
	 var texto = "México";
	 maquina("typer",texto,250,0);
	});
  
  function maquina(contenedor,texto,intervalo,n){
	var i=0;
    var iter = 0;
    final = false

 	// Creamos el timer        
 	timer = setInterval(function(){
 
        if (i<texto.length && !final) {
	  $("#"+contenedor).html(texto.substr(0,i++) + "_");
          final = i == texto.length;
	} else {
          $("#"+contenedor).html(texto.substr(0,i--) + "_");
          final = i != 0;
	}
  
  if(iter++ == texto.length*2)
  {
    iter = 0;
    n--;
  }
  
  if(n<0)
  {
    clearInterval(timer);
  }

},intervalo)
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="title"  >Estamos ubicados en: <span id="typer"></span></h1>

Te lo pongo por si te pudiera servir, pero repasaré el código más tarde para enmendar el error.

3
  • Gracias julio, sin embargo el de AnonimoPer me sirve un poco más pues cumple con lo que necesito: Que es poder crear una lista de textos para que se vayan mostrando con el mismo efecto. el 27 abr. 2018 a las 18:51
  • Sin problema, me lo quedo como ejercicio si no te importa ¡Me alegro de que hayas encontrado una solución!
    – Juliosor
    el 27 abr. 2018 a las 18:57
  • Muchas gracias muy amable Julio. Un abrazo. el 3 jul. 2018 a las 8:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.