No soy muy avanzado en CSS3, así que he recurrido a ChatGPT para animar el texto con este prompt:

Puedes generar una clase css3 para simular la escritura de un texto del ordenador con JavaScript. Primero aparece el cursor en el centro de la pantalla y escribe el texto: «No puedes ser reemplazado por ChatGPT, pero puedes ser reemplazado por un humano que sepa utilizar ChatGPT» Letra grande, responsive, naranja, poppins bold.

Esta es la clase que ha generado.

#texto-animado {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  font-size: 4vw;
  line-height: 1.5; /* reducir el interlineado */
  color: orange; /* cambiar el color de la letra a naranja */
}

Este es el código JavaScript.

<div id="texto-animado"></div>

<script>
  var texto = "Hola, ¿cómo estás? Este es un texto de prueba que se dividirá en varias líneas.";
  var velocidad = 50; // velocidad de escritura en milisegundos

  function escribirTexto(texto, elemento) {
    var i = 0;
    var intervalo = setInterval(function() {
      if (i < texto.length) {
        elemento.innerHTML += texto.charAt(i);
        i++;
      } else {
        clearInterval(intervalo);
      }
    }, velocidad);
  }

  var textoAnimado = document.getElementById("texto-animado");
  textoAnimado.style.fontSize = "4vw"; // ajustar el tamaño del texto al ancho de la ventana del navegador
  textoAnimado.style.lineHeight = "1.5"; // reducir el interlineado
  textoAnimado.style.color = "orange"; // cambiar el color de la letra a naranja
  escribirTexto(texto, textoAnimado);
  
  // Actualizar el tamaño del texto al cambiar el tamaño de la ventana del navegador
  window.addEventListener('resize', function() {
    textoAnimado.style.fontSize = "4vw";
  });
</script>

Probamos el código:

Cómo Crear un Texto Animado con CSS

Crear un texto animado utilizando CSS y un poco de JavaScript puede darle a tu sitio web un toque dinámico y moderno. Las animaciones de texto, como la animación de "escritura", no solo capturan la atención del usuario sino que también hacen que el contenido sea más interactivo y entretenido. A continuación, te mostraremos cómo implementar estas animaciones de forma sencilla en tu web.

Animar texto con CSS es más fácil de lo que parece. Con unas pocas líneas de CSS3 puedes dar vida a tus textos. A través de las propiedades de CSS3, podemos controlar la animación, incluyendo cómo y cuándo debe suceder. Al combinar CSS3 con JavaScript, se abre un abanico de posibilidades aún mayor, permitiéndonos crear animaciones complejas y con control programático.

Antes de adentrarnos en el código, vale resaltar que el utilizar un enfoque "responsive" asegura que nuestras animaciones de texto se vean genial en cualquier dispositivo, desde teléfonos móviles hasta pantallas grandes. La tipografía 'Poppins Bold' es una elección popular para este tipo de animaciones, gracias a su legibilidad y estética moderna. Además, aplicar un color como el naranja puede hacer que el texto resalte y sea aún más atractivo.

Para empezar, definiremos una clase CSS que configurará la apariencia del texto y prepararemos un script que se encargará de añadir las letras de nuestro texto una a una en pantalla, simulando así el efecto de escritura. El resultado es una animación de texto fascinante que puede mejorar significativamente la interactividad y el valor estético de tu sitio.

Ahora que tienes una solución práctica para animar texto con CSS3 y JavaScript, ¿por qué no intentarlo en tu propio proyecto? Sigue leyendo para encontrar el código detallado que podrás copiar, pegar y personalizar según tus necesidades.

Juande Marín

Profesor de Marketing digital, divulgador de inteligencia artificial y neuroeducación. Especializado en posicionamiento en buscadores y diseño web. Autor de varios libros relacionados con el comercio electrónico y el marketing digital (McGraw Hill, Paraninfo,…) Juande2marin