Эффект пишущей машинки JavaScript: создание анимации слева направо

Чтобы создать в JavaScript эффект пишущей машинки, перемещающий текст слева направо, вы можете использовать несколько методов. Вот несколько подходов:

  1. CSS-анимация. Вы можете создать CSS-анимацию и применить ее к текстовому элементу. Используйте @keyframes, чтобы определить анимацию, и свойство animation, чтобы применить ее к тексту. Настраивая свойства animation-delayи animation-duration, вы можете контролировать скорость набора текста и задержку между каждым символом.

  2. JavaScript с setTimeout: используйте функцию JavaScript setTimeoutдля добавления символов в текстовый элемент один за другим. Установите задержку между каждым символом, чтобы контролировать скорость набора текста. Вы можете добавить каждый символ к существующему тексту, используя свойство textContentили innerHTML.

  3. JavaScript с setInterval: вместо использования setTimeoutвы можете использовать setIntervalдля многократного добавления символов в текстовый элемент с фиксированным интервалом. Этот метод позволяет контролировать скорость набора текста, регулируя интервал времени.

  4. Переход CSS и JavaScript: объедините переходы CSS с JavaScript, чтобы добиться эффекта пишущей машинки. Сначала скройте текстовый элемент с помощью CSS (opacity: 0или visibility: Hidden). Затем используйте JavaScript, чтобы постепенно отображать текст, добавляя класс CSS, который устанавливает для свойства непрозрачности или видимости значение по умолчанию. Вы можете контролировать скорость набора текста, регулируя продолжительность перехода.

Вот пример использования метода JavaScript setTimeout:

<!DOCTYPE html>
<html>
<head>
  <style>
    .typewriter {
      overflow: hidden; /* Ensures the text is not visible */
      border-right: .15em solid orange; /* Creates the typewriter cursor */
      white-space: nowrap; /* Prevents line breaks */
      margin: 0 auto; /* Centers the text element */
    }
  </style>
</head>
<body>
  <h1 class="typewriter" id="typewriter"></h1>
  <script>
    const textElement = document.getElementById('typewriter');
    const text = 'Hello, World!';
    let index = 0;
    function type() {
      textElement.textContent = text.substr(0, index);
      index++;
      if (index <= text.length) {
        setTimeout(type, 100); // Adjust typing speed here (in milliseconds)
      }
    }
    type();
  </script>
</body>
</html>