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

Question

[Ingernirated]

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

Answer 1

[0xD34F]

Будем вставлять вместо текста элементы, каждый из которых содержит по одной букве.

Куда: <div id="container"></div>.

Как анимировать появление элементов:

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

Как перебирать с задержкой массивоподобный объект:

const forEachWithDelay = (arr, delay, callback) =>
  (function next(i) {
    if (i < arr.length) {
      setTimeout(() => (callback(arr[i]), next(-~i)), delay);
    }
  })(0);

// или

async function forEachWithDelay(arr, delay, callback) {
  for (let i = 0; i < arr.length; i++) {
    await new Promise(r => setTimeout(r, delay));
    callback(arr[i]);
  }
}

Вот так всё просто получается:

forEachWithDelay(
  'hello, world!!',
  100,
  n => document
    .querySelector('#container')
    .insertAdjacentHTML('beforeend', `<span>${n}</span>`)
);

Comments

[Ingernirated]

спасибо

[Bhudh]

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

Answer 2

[Bhudh]

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