Texte animé

Bonjour, j'aimerais créer une succession de mots qui apparaissent lettre par lettre, avant de s'effacer. J'ai fais plusieurs essayes, mais aucun résultats convaincants. Mon premier programme fonctionne à peux près, mais la première lettre créée est aussi la première à s'effacer. Hors, j'aimerais que se soit le contraire. Dans le deuxième bout de code, j'essaye de résoudre le problème, sans grand succès. Est-ce que quelqu'un pourrais m'aider s'il vous plaît ? Merci d'avance.

const target = document.getElementById("target");
let array = ["beau", "fort", "intelligent"];
let wordIndex = 0;
let letterIndex = 0;

const createLetter = () => {
  const letter = document.createElement("span");
  target.appendChild(letter);

  letter.textContent = array[wordIndex][letterIndex];

  setTimeout(() => {
    letter.remove();
  }, 2800);
};

const loop = () => {
  setTimeout(() => {
    if (wordIndex >= array.length) {
      wordIndex = 0;
      letterIndex = 0;
      loop();
    } else if (letterIndex < array[wordIndex].length) {
      createLetter();
      letterIndex++;
      loop();
    } else {
      wordIndex++;
      letterIndex = 0;
      setTimeout(() => {
        loop();
      }, 4000);
    }
  }, 60);
};
loop();

const target = document.getElementById("target");
let array = ["beau", "fort", "intelligent"];
let wordIndex = 0;
let letterIndex = 0;

const createLetter = () => {
  const letter = document.createElement("span");
  target.appendChild(letter);

  letter.textContent = array[wordIndex][letterIndex];

  setTimeout(() => {
    letter.remove();
  }, 2800 + 100 * (array[letterIndex].length + 1) - 100 * letterIndex);
};

const loop = () => {
  setTimeout(() => {
    if (wordIndex >= array.length) {
      wordIndex = 0;
      letterIndex = 0;
      loop();
    } else if (letterIndex < array[wordIndex].length) {
      createLetter();
      letterIndex++;
      loop();
    } else {
      wordIndex++;
      letterIndex = 0;
      setTimeout(() => {
        loop();
      }, 4000);
    }
  }, 60);
};
loop();

Modifié par Yuuno (05 Sep 2021 - 02:41)