Animando tu Escritura con HTML y JavaScript

¿No sería genial ver cómo tu escritura cobra vida, como si se estuviera escribiendo por sí sola? En este artículo, te mostraremos la manera de estar animando tu escritura utilizando HTML y JavaScript.

Da vida a tu escritura

Contenido HTML para la Animación

En primer lugar, cuando estamos animando tu escritura con html y JavaScript, comenzaremos con crear un área de texto donde escribiremos y un botón para ejecutar la animación del texto escrito. Así de sencillo va a ser nuestro HTML

<div>
    <h1>Da vida a tu escritura</h1>
    <textarea id="txtin" cols="30" rows="10"></textarea>
    <button id="typebtn">Animar</button>
</div>
<div>
    <p id="txtout"></p>
</div>

JavaScript para la Animación del Texto

El script que utilizaremos es simple pero efectivo. Guardaremos el valor del área de texto en una variable y luego crearemos una condición que presentará el contenido letra por letra. Para hacer esto, contaremos la cantidad de caracteres dentro de la variable y los mostraremos en pantalla a medida que aumentamos el valor de la variable que utilizamos para contar.

Además, agregaremos una función de tiempo a la condición para que los caracteres aparezcan a un ritmo específico. Por último, vincularemos la función typewriter al botón. Sin más preámbulos, aquí tienes el código:

var i = 0,
    txt = document.getElementById('txtin'),
    txtout = document.getElementById('txtout'),
    txtbtn = document.getElementById('typebtn'),
    speed = 50;

function typewriter() {
    var textToType = txt.value;
    if (i < textToType.length) {
        txtout.innerHTML += textToType.charAt(i);
        i++;
        setTimeout(typewriter, speed);
    }
}

txtbtn.onclick = typewriter;

Resultado de la Animación de Tu Escritura

¡Y eso es todo! Con este código, lograrás animar tu escritura de una manera sencilla pero efectiva. Simplemente escribe el texto que deseas animar en el área de texto y haz clic en el botón "Animar". Verás cómo tu escritura cobra vida, apareciendo en pantalla como si se estuviera escribiendo por sí sola.

¡Diviértete experimentando con esta animación de escritura y dando vida a tus contenidos web! Puedes continuar con este tutorial como un challenge tratando de guardar la animación como una imagen animada usando gif.js. Una vez que pruebes dime que tal te ha gustado.

The Digital Mike