¿Alguna vez has visto esas animaciones de texto geniales en sitios web, donde las letras aparecen y desaparecen de manera ordenada, creando una experiencia atractiva y llamativa? Pues hoy te voy a enseñar cómo lograr este efecto utilizando JavaScript. El código que te voy a mostrar es sencillo de entender y fácil de adaptar a tus propios proyectos. Aquí abajo te voy a dejar el código HTML, el CSS y el JavaScript. El código JavaScript ya está completo. Esta vez quiero darle un formato algo diferente al blog. Puedes copiar esté código por completo y ya estará funcionando en tu editor. Luego de que lo copies, lo iremos revisando paso por paso para que no te quedes con ninguna duda. Si te gusta más este formato déjame un comentario aquí abajo dejándome saber. ¡Vamos a ello!
Código de Partida: HTML y CSS
Código Completo: JavaScript
Configuración Inicial: Declarando Variables
Aquí, definimos la variable textoAnimacion, un array bidimensional que contiene dos arrays con las letras de las palabras que queremos animar. En este caso, las palabras son ¨Braulio¨ y ¨a Developer¨. También declaramos la variable letraContador para llevar la cuenta de las letras, posicionArray para movernos entre las palabras en el array textoAnimacion y por último, contenedorAnimacion que hace referencia al elemento HTML donde se mostrará la animación.
Función Principal: pintarTexto()
Dentro de esta función, incrementamos letraContador y luego modificamos el DOM añadiendo la letra correspondiente del array textoAnimacion al contenedorAnimacion. Luego abrimos una condición que dice que, si letraContador alcanza el final de la palabra actual, detenemos el intervalo y configuramos un temporizador (setTimeout()) para borrar la palabra de manera ordenada.
Estableciendo el Temporizador para Borrar el Texto
En este punto necesitamos configurar un temporizador que se ejecutará después de 1 segundo (1000 milisegundos) para comenzar a borrar la palabra actual. El temporizador utiliza la función setTimeout() que recibe dos argumentos: una función anónima y el tiempo de espera en milisegundos. Dentro del temporizador, creamos un nuevo intervalo usando setInterval() que se ejecuta cada 150 milisegundos. La función setInterval() también recibe dos argumentos: una función anónima y el tiempo entre cada ejecución en milisegundos.
En cada iteración del intervalo, realizamos las siguientes acciones:
- Limpiamos el contenido de contenedorAnimacion con la propiedad innerHTML y le pasamos una cadena vacía(=¨¨).
- Disminuimos el contador letraContador en uno para movernos hacia la letra anterior en el array.
- Utilizamos el método pop() en el array textoAnimacion[posicionArray]. Y para que no te quedes con dudas te cuento que el método pop() elimina el último elemento del array y devuelve el valor eliminado. En este caso, estamos eliminando la última letra del array textoAnimacion[posicionArray]. Al hacer esto, estamos efectivamente borrando la última letra de la palabra actual.
- Después de eliminar la última letra usando el método pop(), utilizamos un bucle forEach para iterar a través de las letras restantes en el array textoAnimacion[posicionArray]. Y dentro de este forEach, agregamos esa letra al contenido de contenedorAnimacion utilizando ( += ).
Cambio de Palabras y Reiniciando la Animación
Ahora, necesitamos verificar si letraContador es menor que 0, lo que indica que todas las letras de la palabra actual han sido borradas. Si es así, realizamos las siguientes acciones:
- Detenemos el intervalo actual usando clearInterval(intervalo) para detener el proceso de borrado de letras.
- Incrementamos el contador posicionArray en uno para pasar a la siguiente palabra en el array textoAnimacion.
- Creamos un nuevo intervalo llamando a setInterval(pintarTexto, 150), donde la función pintarTexto se ejecutará cada 150 milisegundos para escribir la siguiente palabra letra por letra.
Luego, verificamos si el contador posicionArray es mayor que textoAnimacion.length – 1. Si es así, significa que hemos pasado por todas las palabras en el array textoAnimacion. En este caso, realizamos las siguientes acciones:
- Detenemos el intervalo actual usando clearInterval(intervalo) para detener el proceso de escritura de letras de la última palabra.
- Reiniciamos posicionArray a 0 para comenzar desde la primera palabra del array textoAnimacion.
- Llamamos a la función animacion() nuevamente para reiniciar todo el proceso de animación.
Repasando lo Aprendido
A lo largo de este artículo, exploramos cómo crear animaciones de texto con JavaScript, logrando un efecto atractivo letra por letra. A continuación, te presento un resumen de los aspectos clave abordados para que tengas una visión clara y rápida de todo lo discutido.
🚀 Resumen Rápido: Animando Texto con JavaScript
- Introducción: Explicación sobre las animaciones de texto en sitios web y su impacto visual.
- Inicialización de Variables: Configuración de las variables necesarias para la animación, incluyendo el array bidimensional de palabras.
- Función pintarTexto(): Método principal para agregar letras al contenedor de animación y controlar el flujo del texto.
- Configuración del Temporizador: Establecimiento de un temporizador para comenzar a borrar las palabras de manera ordenada.
- Dinámica del Borrado: Proceso de eliminación de letras usando intervalos, incluyendo el uso del método pop() y el bucle forEach.
- Cambios en las Palabras: Lógica para cambiar entre las palabras del array y reiniciar la animación de escritura.
Finalizando: La Magia de Animar Texto con JavaScript
En general, este código utiliza una combinación de métodos y funciones de JavaScript para crear una animación de escritura de letras en una página web. Cada letra se escribe una por una utilizando intervalos y la animación continúa hasta que se han escrito todas las palabras en el array textoAnimacion. Este código es una buena muestra de cómo se pueden utilizar las funciones y los métodos de JavaScript para crear animaciones simples pero efectivas en una página web. Pues nada coder, hemos llegado al final y no me queda más que despedirme. Espero que lo hayas disfrutado que hayas aprendido algo nuevo y nos leemos en el siguiente.
¡Un Abrazo! Braulio de AprendeCode.