4

Estoy creando una web y necesito hacer que un texto:

  1. Se escriba con un efecto como de máquina de escribir.
  2. Cuando ya termine de escribir debe permanecer el texto escrito por unos tres segundos.
  3. 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>

3
  • aqui tienes la solucion es.stackoverflow.com/questions/46823/… el 7 abr. 2017 a las 0:35
  • Sabes que eso ya tengo hecho , esta casi igual , el problema es que el texto luego de haberse mostrado debe permanecer visible por unos segundos y de ahí debe borrarse y comenzar el efecto desde el inicio, esa parte no lo logro. Gracias con todo si puedes ayudarme con lo que me falta muchas gracias
    – Barckl3y
    el 7 abr. 2017 a las 0:55
  • disculpa como hiciste para solucionar el tema de la pausa el 9 abr. 2018 a las 6:14

3 respuestas 3

8

Puedes lograrlo con el método setTimeout del objecto window, haz la siguiente modificación:

$(function(){
 var texto = "Texto Ejemplo / Ejemplo 2  / Ejemplo 3";
 maquina("typer",texto,100,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 {
   // En caso contrario..
   // Salimos del Timer y quitamos la barra baja (_)
   clearInterval(timer);
   $("#"+contenedor).html(texto);
   // Auto invocamos la rutina n veces (0 para infinito)
   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>
<body>
 <p id="typer"></p>
</body>

2
  • Excelente , ahí si me funciono de lujo, muchas gracias por la ayuda , quedo genial. :)
    – Barckl3y
    el 7 abr. 2017 a las 2:23
  • pregunta como haces que se ejecute lo que pones, aun no he descubierto como hacerlo :P gracias
    – A. Serrano
    el 7 abr. 2017 a las 4:38
2

perdon no me di cuenta creo que funcionaria añadiendo un timeout en esta parte

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);
         setTimeOut(function(){
            maquina("typer",texto,100);
            return true;
         }, 5000);
      } else {
         // En caso contrario.. seguimos
         i++;
      }
   },intervalo);
};

esto hará que se llame la funcion maquina despues de 5 segundos

1
  • Muchas gracias por tu respuesta si efectivamente eso faltaba , ya me ayudaron anteriormente y se soluciono , me faltaba un poco para logralo jeje
    – Barckl3y
    el 8 abr. 2017 a las 2:20
0

Hola barckl3y recuerda que el setInterval y el SetTimeOut funcionan con milisegundos por lo que si queremos que una accion se realice en 1 segundo debemos indicarlo en milisegundos osea 1000 en tu caso estas poniendo el intervalo 100 milisegundos que es casi nada solo cambialo y funcionara

    $(function(){

    var texto = "Texto Ejemplo / Ejemplo 2  / Ejemplo 3";
    maquina("typer",texto,3000);

});


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);
};
1
  • Gracias @a-serrano intente lo que me dijiste pero no funciona porque el tiempo que estamos ahí cambiando es el tiempo que se demora en el efecto de maquina de escribir , ahora necesito que después de que el texto ya salió con ese efecto , el texto se vea por unos 5 segundos mas sin hacer nada y de ahí debe borrarse el texto y empezar nuevamente el efecto. gracias con todo , espero que me puedas ayudar
    – Barckl3y
    el 7 abr. 2017 a las 0:57

Tu Respuesta

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

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