Как сделать некоторый текст статическим?

Question

[nodeLogs]

Всем привет!
Нашел на codepen скрипт, который создает эффект печати букв.
В скрипте текст меняется с одного на другой, это гуд.
Но мне нужно, чтобы перед тем текстом, который будет меняться вместить статический.
Который так же при загрузке страницы будет выведен с эффектом печати, но не будет меняться в последующем.
Пример:
%статический текст%: %динамический текст%

Не силён в JS. Попытался в html добавить новый блок с текстом, но тогда он будет выведен без эффекта печати.
Что нужно поправить в JS?

Comments

[Alex_mos]

Изначально в тег h1 вписать текст или если статический текст должен оставаться то оберни все в блок пропиши статический текст, и внутрь вставь блок где текст подставляется

Answer 1

[Khalit]

function setTyper(element, words) {

  const LETTER_TYPE_DELAY = 75;
  const WORD_STAY_DELAY = 2000;

  const DIRECTION_FORWARDS = 0;
  const DIRECTION_BACKWARDS = 1;

  var direction = DIRECTION_FORWARDS;
  var wordIndex = 0;
  var letterIndex = 0;

  var wordTypeInterval;

  var preffix = "static-"
  
  startTyping();

  function startTyping() {
    wordTypeInterval = setInterval(typeLetter, LETTER_TYPE_DELAY);
  }

  function typeLetter() {
    const word = preffix+words[wordIndex];

    if (direction == DIRECTION_FORWARDS) {
      letterIndex++;

      if (letterIndex == word.length) {
        direction = DIRECTION_BACKWARDS;
        clearInterval(wordTypeInterval);
        setTimeout(startTyping, WORD_STAY_DELAY);
      }

    } else if (direction == DIRECTION_BACKWARDS) {
      letterIndex--;

      if (letterIndex == preffix.length) {
        nextWord();
      }
    }

    const textToType = word.substring(0, letterIndex);

    element.textContent = textToType;
  }

  function nextWord() {

    letterIndex = preffix.length;
    direction = DIRECTION_FORWARDS;
    wordIndex++;

    if (wordIndex == words.length) {
      wordIndex = 0;
    }

  }
}

Comments

[nodeLogs]

Спасибо!