Cómo hacer el efecto máquina en un texto usando JavaScript

En este post aprenderás cómo hacer el efecto máquina en un texto usando JavaScript: obtendrás un código que lo hará de forma INCREÍBLE. ¡ENTRA!

 

INICIAMOS:

Bienvenidos a otro post.

Hoy hablaremos de JavaScript, y es que nos pasó por la mente brindarles un código que sea capaz de hacer el efecto máquina en un texto.

Pero no nos vayamos demasiado lejos, si aún no tienes muy en claro qué es este efecto, ¡no te preocupes, te explicamos!

¿Qué es el efecto máquina?

El efecto máquina es un efecto que se puede hacer en diversos lenguajes de programación para interpretar que el texto se está escribiendo en ese momento.

Cuando escribes un contenido, los textos van apareciendo conforme aprietas las teclas, ¿no? ¡Pues eso es el fecto máquina!

Tú configuras un texto y pasándolo por JavaScript, se puede hacer este increíble efecto.

Cómo hacer el efecto máquina en un texto usando JavaScript

Primero creamos un div con una id (será la que JavaScript usará para hacer ese efecto):

<div id="efecto"></div>

Ahora, copia este código y edítalo conforme a lo que te especificaremos más abajo de esta página:

<script type="text/javascript">
var mensaje = "Esto es una prueba", pausa = 200; 
function inicio(){ 
 var i = 0;
 var m = mensaje.split(''); 
 var t = setInterval( 
 function(){ 
 if(i >= m.length-1)clearInterval(t); 
 document.getElementById('efecto').innerHTML+=m[i];
 i++; 
 }, pausa); 
} 
window.onload = inicio; 
</script>

Lo que está en negrita, subrayado y en itálica, es lo que podemos cambiar para personalizarlo:

• Cambia “efecto” por la id que tenga el div en donde queremos que se vea el efecto.
• Cambiamos “Esto es una prueba” por el mensaje que queremos imprimir.
• Cambia “200” por el tiempo de espera entre cada letra (en milésimas de segundo [ej: 1000 = 1 segundo, 500 = 0.5 segundos, etc]).

Y si lo probamos, veremos que se ve un efecto maquina de escribir como lo tiene «Esto es una prueba».

VER PRUEBA QUE NOSOTROS HICIMOS CON ESTE CÓDIGO

Mejorar el efecto máquina usando CSS

Si quieres hacer el efecto máquina en un texto usando JavaScript más avanzado e involucrando al lenguaje de diseño CSS, te recomiendo ver este video:

---

Antes de finalizar este post, me gustaría comentarte que en este blog encontrarás más contenidos útiles para programadores: scripts, ayuda, tips, programas, etc… ¡Visítanos!

De igual forma, redactamos tutoriales de tecnología de todo tipo: gaming, software, hardware, redes, programación, etc, etc… ¡Seguro habrá algo que te interese ver!

¿Qué tal te pareció este efecto máquina en un texto usando JavaScript? ¡Háznoslo saber por medio de la caja de comentarios (abajo de este post)!

Nod vemos en otro artículo.