Test Foro de elhacker.net SMF 2.1

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 (javascript) [Seleccionar]
function maquina(contenedor,texto,intervalo){
   // Calculamos la longitud del texto
   var longitud = texto.length;
   // Obtenemos referencia del div donde se va a alojar el texto.
   var cnt = document.getElementById(contenedor);
   var i=0;
   // Creamos el timer
   timer = setInterval(function(){
      // Vamos añadiendo letra por letra y la _ al final.
      cnt.innerHTML = cnt.innerHTML.substr(0,cnt.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);
         cnt.innerHTML = cnt.innerHTML.substr(0,longitud);
         return true;
      } else {
         // En caso contrario.. seguimos
         i++;
      }},intervalo);
};


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


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

Espero que te sirva =)

Saludos