Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: mxsoun en 20 Marzo 2013, 19:20 pm



Título: efecto con texto
Publicado por: mxsoun en 20 Marzo 2013, 19:20 pm
buen dia, quiero realizar un efecto de tipo maquina de escribir va apareciendo el texto letra por letra pero con efecto tipo maquina de escriibir.
e visto algunos que salen asi "_ejemplo" . el  "_" como que va poniendo el texto, tento entendido que se tiene que hacer con javascript pero la verdad desconozco como espero alguien me pueda ayudar

gracias


Título: Re: efecto con texto
Publicado por: #!drvy en 22 Marzo 2013, 07:54 am
Hola, es bastante sencillo. Lo unico que necesitas es un timer (setInterval()) y ir añadiendo letra por letra. Te dejo un ejemplo que acabo de improvisar xD

Código
  1. function maquina(contenedor,texto,intervalo){
  2.   // Calculamos la longitud del texto
  3.   var longitud = texto.length;
  4.   // Obtenemos referencia del div donde se va a alojar el texto.
  5.   var cnt = document.getElementById(contenedor);
  6.   var i=0;
  7.   // Creamos el timer
  8.   timer = setInterval(function(){
  9.      // Vamos añadiendo letra por letra y la _ al final.
  10.      cnt.innerHTML = cnt.innerHTML.substr(0,cnt.innerHTML.length-1) + texto.charAt(i) + "_";
  11.      // Si hemos llegado al final del texto..
  12.      if(i >= longitud){
  13.         // Salimos del Timer y quitamos la barra baja (_)
  14.         clearInterval(timer);
  15.         cnt.innerHTML = cnt.innerHTML.substr(0,longitud);
  16.         return true;
  17.      } else {
  18.         // En caso contrario.. seguimos
  19.         i++;
  20.      }},intervalo);
  21. };

Para usarlo solo necesitas un DIV u otro contenedor y el texto.
Código
  1. <div id="maquinas"></div>
  2. <script>
  3. var texto = "Hola mundo..";
  4. // 100 es el intervalo de milisegundos en el que se escribirá cada letra.
  5. maquina("maquinas",texto,100);
  6. </script>

Vista previa / Demo (http://jsfiddle.net/drvy/QurkF/4/)

Espero que te sirva =)

Saludos