Побуквенный вывод текста в блоке на JavaScript, CSS.

Вопрос к AI ChatGPT-4: Нужен код на javascript и css который реализует побуквенное показывание текста в блоке div учитывая параграфы и переносы строк. Подробное описаие работы кода.

Вот пример кода на JavaScript и CSS, который реализует побуквенное появление текста в блоке div, учитывая параграфы и переносы строк:

<div id="text-container">
  <p>Lorem ipsum dolor sit amet,</p>
  <p>consectetur adipiscing elit,</p>
  <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

#text-container {
  white-space: pre-line;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

function fadeTextIn(element) {
  const paragraphs = element.getElementsByTagName('p');
  for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs[i];
    const text = paragraph.innerText;

    paragraph.innerHTML = ''; // Очищаем параграф

    for (let j = 0; j < text.length; j++) {
      const span = document.createElement('span');
      span.innerText = text.charAt(j);
      span.classList.add('fade-in');
      paragraph.appendChild(span);
    }
  }

  const spanArray = Array.from(element.getElementsByTagName('span'));
  spanArray.forEach((span, index) => {
    setTimeout(() => { span.style.opacity = '1'; }, index * 50);
  });
}

const textContainer = document.getElementById('text-container');
fadeTextIn(textContainer);

Описание работы кода:

1. В HTML создается блок div с идентификатором "text-container", содержащий параграфы с текстом.
2. С помощью CSS задается стиль для блока ""text-container", чтобы учитывать переносы строк.
3. В JavaScript определяется функция fadeTextIn, которая показывает текст побуквенно в указанном элементе.
4. Внутри функции с помощью метода getElementsByTagName получаем все параграфы внутри заданного элемента.
5. Для каждого параграфа сохраняем его текст и очищаем его содержимое.
6. Далее создаем для каждой буквы параграфа отдельный span элемент с классом "fade-in", который отвечает за плавное появление текста.
7. Созданные span элементы добавляем в параграф.
8. Затем, с помощью метода Array.from и вызова forEach, получаем массив всех span элементов.
9. Для каждого элемента из массива устанавливаем таймер, который через определенное время изменяет прозрачность элемента на 1.
10. В конце кода находим элемент с идентификатором "text-container" и вызываем функцию fadeTextIn, передавая этот элемент в качестве аргумента.

Таким образом, при загрузке страницы текст в блоке div будет появляться побуквенно с плавным эффектом для каждого параграфа и учитывая переносы строк.