Animar tu escritura con javascript

animacion de texto

Hola, que genial seria ver como tu escritura es animada como si se estuviera escribiendo por si sola. Pues aquí les traigo un pequeño articulo presentando como animar tu escritura con JavaScript.

Contenido del HTML para animar

Para el HTML, solo vamos a crear un area de texto donde escribiremos y un botón para ejecutar la animación del texto escrito.

<div>
        <h1>Animate your typing</h1>
        <textarea id="txtin" cols="30" rows="10"></textarea>
        <button id="typebtn">Animate</button>
    </div>
    <div>
        <p id="txtout"></p>
    </div>

JavaScript que permite la animación del texto

El script va a ser simple, guardaremos el valor de area de texto en una variable para luego, crear una condición que presenta el contenido letra por letra. Para esto contamos la cantidad de caracteres dentro de la variable y las vamos presentando en pantalla mientras aumentamos el valor de la variable que vamos a utilizar para contar. Ademas, agregaremos dentro de la condición una función de tiempo para que los caracteres aparezcan en un tiempo especifico. Por ultimo, incluimos la función typewriter al botón. Sin mas, aquí esta el código.

<script>
        var i=0,
            txt = document.getElementById('txtin'),
            txtout = document.getElementById('txtout'),
            txtbtn = document.getElementById('typebtn'),
            speed=50;
        function typewriter(){
            var lt=txt.value;
            if(i < lt.length){
                txtout.innerHTML += lt.charAt(i);
                i++;
                setTimeout(typewriter, speed);
            }
        }
        txtbtn.onclick = typewriter;
    </script>

Resultado de animar tu escritura