efecto con texto

Iniciado por mxsoun, 20 Marzo 2013, 19:20 PM

0 Miembros y 1 Visitante están viendo este tema.

mxsoun

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

#!drvy

#1
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

Espero que te sirva =)

Saludos