elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a la Factorización De Semiprimos (RSA)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  efecto con texto
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: efecto con texto  (Leído 1,873 veces)
mxsoun

Desconectado Desconectado

Mensajes: 43


Ver Perfil
efecto con texto
« 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


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: efecto con texto
« Respuesta #1 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

Espero que te sirva =)

Saludos


« Última modificación: 22 Marzo 2013, 08:31 am por drvy | BSM » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Efecto texto
Diseño Gráfico
Lmc 4 2,238 Último mensaje 24 Agosto 2004, 02:42 am
por Sub_Cero
Photoshop. Efecto de texto
Diseño Gráfico
rfilgueiras 2 1,858 Último mensaje 9 Septiembre 2004, 20:38 pm
por rfilgueiras
efecto de texto metalico « 1 2 »
Diseño Gráfico
Butcherboy 10 4,006 Último mensaje 28 Junio 2005, 16:45 pm
por TheNewNazgul
Efecto brillo texto
Diseño Gráfico
M0nster 0 2,391 Último mensaje 21 Septiembre 2007, 03:46 am
por M0nster
Efecto para texto en photoshop (resubido) « 1 2 »
Diseño Gráfico
Unnamed 19 10,465 Último mensaje 28 Abril 2008, 23:13 pm
por DaRk_EyeS
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines