Как создать эффект печатающегося текста (js)?

Question

[iodoroshchenco]

Всем привет!

Подскажите, пожалуйста, как создать эффект (или где об этом можно почитать) печатающегося текста, с помощью javascript?
Пример: https://habra.chat/

Comments

[edward_freedom]

ты полюбому видел этот пример https://codepen.io/littletoni/pen/YjRjVW
чем он тебе не подошел?

[iodoroshchenco]

edward_freedom, спасибо за ссылку. Я не совсем понимаю, как сделать так чтоб текст печатался от начала до конца, при этом текст находился в разных блоках.

Если открыть пример, там все печатается "строка за строкой", а как это сделать - моему разуму не ясно. :( Если же я сделаю текст в котором, например, будет два заголовка (h3) и два параграфа (p) - у меня они печатаются параллельно.

[edward_freedom]

doroshchenco, я и спрашиваю, если ты уже имел в наличии эту ссылку, зачем ты повторно просишь людей кидать тебе уже имеющиюся информацию?

Answer 1

[Dmitriy Grape]

https://github.com/mattboldt/typed.js/

Answer 2

[Smirator]

Приветствую, так?

<pre></pre>

body {
  background: #fff;
  color: #000;
  font-family: monospace;
  font-size: 24px;
}

const text = [
  'Ты у меня одна,\n',
  'Словно в ночи луна,\n',
  'Словно в году весна,\n',
  'Словно в степи сосна.\n'
];


 let line = 0;
  let count = 0;
  let result = '';
  function typeLine() {
    let interval = setTimeout(
      () => {
        result += text[line][count]
        document.querySelector('pre').innerHTML =result +'|';


      count++;
      if (count >= text[line].length) {
        count = 0;
        line++;
        if (line == text.length) {
          clearTimeout(interval);
           document.querySelector('pre').innerHTML =result;
          return true;
        }
      }
      typeLine();
    }, getRandomInt(getRandomInt(250*2.5)))
  }
  typeLine();

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}