Estoy tratando de animar texto con javascript usando una matriz con intervalos de tiempo, por ejemplo, t te tex text , quiero que pase de 0 a 21 y viceversa y no estoy completamente seguro de cómo hacerlo. ¡Cualquier ayuda es muy apreciada!
Concepto general:
Debe actualizar la salida de la cadena cada marca con el siguiente valor hasta que la cadena completa sea visible. El intervalo de tic define qué tan rápida es la animación.
Una de las posibles realizaciones a continuación:
// Wait [ms] milliseconds const Delay = ms => new Promise(r => setTimeout(r, ms)); // Main function const main = async () => { const p = document.querySelector('p'); // String you wanna animate const targetText = 'Hello there!'; // Tick interval const tick = 60; // Iterating through string for (let i = 1; i <= targetText.length; i++) { // Set new value p.innerHTML = (' '.repeat(targetText.length - i) + targetText.slice(-i)); // Wait for a next tick await Delay(tick); } } main(); p { font-family: Monospace; } <p></p> Aquí están:
- el espacio será visible dentro de .innerHTML() ; tick - intervalo entre cuadros de animación (en milisegundos);