Изменение текста как анимация в HTML через JS

Question

Проблема:

Есть текст, который нужно изменить, желательно через цикл.

Пытаюсь сделать эффект написания. Есть строка, и мне нужно сделать так, что бы на место значения слова, подставилась первая буква этого слова. Пытаюсь сделать цикл, с помощью которого, будут выставляться все буквы, находившиеся в этом слове по порядку.

  let btn = document.querySelector(".btn"),
      title = document.querySelector(".title");

btn.addEventListener("click", () => {
  let anyString = title.textContent;
  for (let i = 0; i <= anyString.length; i++) {
    title.innerHTML = anyString.substring(0, i);
  }

});

Можете, пожалуйста, разъяснить ошибку. Пытался через преобразование в String сделать, не помогло.

Answer 1

Код у Вас рабочий, но из-за того, что скрипт выполняется почти мгновенно, создаётся обратное впечатление. В этом легко убедиться, если подставить другой текст:

let btn = document.querySelector(".btn"),
  title = document.querySelector(".title");

btn.addEventListener("click", () => {
  //let anyString = title.textContent;
  let anyString = 'boom';

  for (let i = 0; i <= anyString.length; i++) {
    title.innerHTML = anyString.substring(0, i);
  }
});

<h1 class="title">title</h1>
<button class="btn">button</button>

Чтобы замедлить вывод символов, нужно добавить задержку:

let btn = document.querySelector(".btn"),
  title = document.querySelector(".title");

btn.addEventListener("click", fTypeText);

function fTypeText() {
  let anyString = title.textContent;
  let i = 1;
  let fType = function() {
    if (i <= anyString.length) {
      title.innerHTML = anyString.substring(0, i);
      setTimeout(arguments.callee, 200);
    }
    i++;
  }
  fType();
};

<h1 class="title">Печатающийся текст</h1>
<button class="btn">button</button>

А вот если добавить анимацию, то задержку можно реализовать по-другому:

let btn = document.querySelector(".btn"),
  title = document.querySelector(".title");

btn.addEventListener("click", fTypeText);

function fTypeText() {
  let anyString = title.textContent;
  title.innerHTML = '';
  let i = 0;
  let fType = function() {
    if (i < anyString.length) {
      title.insertAdjacentHTML('beforeend', `<span>${anyString[i]}</span>`);
    }
    i++;
  }
  title.addEventListener("animationend", fType);
  fType();
};

.title span {
  display: inline-block;
  white-space: pre;
  animation: type .2s ease-in;
}

@keyframes type { 60%, 70% { transform: scale(2); } }

<h1 class="title">Печатающийся текст</h1>
<button class="btn">button</button>

БЛОГ НА HUSL

Изменение текста как анимация в HTML через JS

Ответы (1 шт):