Как собрать слово из букв?

Question

[Ingernirated]

Всем привет!
Нужно сделать слово, которое собирается из букв.
Т.е. влетает одна, за ней вторая и так всё слово.
Сделать Анимация и появление одной не трудно, но остальные, если изменять innerHTML просто рядом с ней появляются, а не долетают с боку.
Как к новым буквам добавить анимацию?

Answer 1

[0xD34F]

<div id="container"></div>

const container = document.querySelector('#container');
const text = 'hello, world!!';
const delay = 300;

// можно сразу назначить таймауты для каждого из символов текста
for (const [ i, n ] of Array.prototype.entries.call(text)) {
  setTimeout(() => {
    container.insertAdjacentHTML('beforeend', `<span>${n}</span>`);
  }, 300 * i);
}

// или, назначать следующий таймаут после выполнения предыдущего
(function step(i) {
  if (i < text.length) {
    const span = document.createElement('span');
    span.textContent = text[i];
    container.insertAdjacentElement('beforeend', span);
    setTimeout(step, delay, i + 1);
  }
})(0);

// или, вместо множества таймаутов назначить один интервал
let i = 0;
const intervalId = setInterval(() => {
  const span = document.createElement('span');
  span.innerText = text[i];
  container.append(span);
  if (++i >= text.length) {
    clearInterval(intervalId);
  }
}, delay);

span {
  display: inline-block;
  animation: span .2s ease-out;
  font-size: 40px;
}
@keyframes span {
  from {
    transform: translateX(500px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

Comments

[Ingernirated]

спасибо

[Bhudh]

Вот так всегда. Благодарят не того, кто дал удочку, а того, кто дал рыбу.

Answer 2

[Bhudh]

Изменять HTML не по буквам, а по элементам, содержащим букву.
У элементов есть свойства позиции, а у куска текста их нет.