Efecto de Escritura Animada de Texto

Este componente crea un efecto de animación de escritura realista usando solo animaciones CSS. Es perfecto para secciones hero, páginas de inicio o cualquier lugar donde quieras llamar la atención del usuario con texto dinámico.

Características

• Animación CSS Pura: No se requiere JavaScript para la implementación básica
• Efecto de Escritura Realista: Usa la función CSS steps() para una escritura auténtica
• Cursor Parpadeante: Simula un cursor de máquina de escribir con animación parpadeante
• Responsivo: Se adapta a diferentes tamaños de pantalla
• Soporte Modo Oscuro: Ajusta los colores para el modo oscuro
• Personalizable: Fácil de modificar texto, velocidad y estilo

Uso

Para usar este efecto, simplemente incluye el HTML y CSS en tu proyecto. La clave es usar la función de temporización steps() en la animación CSS para crear el efecto de escritura carácter por carácter.

Personalización

Puedes personalizar los siguientes aspectos:

• Contenido del Texto: Cambia el texto dentro del elemento .typing-text
• Velocidad de Escritura: Ajusta la duración de la animación typing (3.5s en el ejemplo)
• Estilo del Cursor: Modifica las propiedades de border-right para diferente apariencia del cursor
• Colores: Cambia los colores de texto y cursor para ambos modos claro y oscuro
• Fuente: Ajusta font-size, font-weight y otras propiedades de fuente
• Pasos de Animación: Modifica el valor de pasos en steps(40, end) para que coincida con el número de caracteres

Compatibilidad del Navegador

Este componente usa animaciones CSS estándar y la función steps(), compatibles en todos los navegadores modernos e IE10+.

Implementación Avanzada

Para escenarios más complejos como:

• Múltiples oraciones
• Animaciones en bucle
• Controles de inicio/parada
• Cambios de texto dinámicos

Necesitarías implementar lógica JavaScript. Una estructura básica para tal implementación podría incluir:

// Ejemplo de efecto de escritura mejorado con JavaScript
const textElement = document.querySelector('.typing-text');
const texts = [
  "¡Bienvenido a nuestro increíble sitio web!",
  "Descubre características increíbles.",
  "Únete a nuestra comunidad hoy."
];

let textIndex = 0;
let charIndex = 0;
let isDeleting = false;

function type() {
  const currentText = texts[textIndex];
  
  if (isDeleting) {
    // Eliminar caracteres
    textElement.textContent = currentText.substring(0, charIndex - 1);
    charIndex--;
  } else {
    // Agregar caracteres
    textElement.textContent = currentText.substring(0, charIndex + 1);
    charIndex++;
  }
  
  // Calcular velocidad de escritura
  let speed = 100;
  if (isDeleting) speed /= 2;
  
  // Verificar si la palabra está completa
  if (!isDeleting && charIndex === currentText.length) {
    // Pausar al final
    speed = 2000;
    isDeleting = true;
  } else if (isDeleting && charIndex === 0) {
    // Pasar al siguiente texto
    isDeleting = false;
    textIndex++;
    if (textIndex === texts.length) textIndex = 0;
    speed = 500;
  }
  
  setTimeout(type, speed);
}

// Iniciar la animación
document.addEventListener('DOMContentLoaded', type);

Esta versión JavaScript proporciona más control y puede manejar múltiples oraciones con bucle.