Во многих фильмах используется набор текста на экране, например, для представления нового места действия. И в этом уроке мы воссоздадим этот эффект, используя веб-технологии. Существует много вариантов создания подобного разными способами, в нашем случае для этого используется JavaScript.

Печать текста

В большинстве случаев для создания такого эффекта наиболее подойдет моноширинный шрифт. Поместим текст в подходящий элемент:

<pre id="teletype" hidden>Somewhere in the South Pacific</pre>

У идентификатора .teletype есть атрибут скрыто, который прячет его. Через одну-две миллисекунды после того, как он в скрытом виде появится на странице, текстовая строка скопируется с помощью JavaScript, после задания элемента курсора:

let cursor = "<span>|</span>",
telecopy = teletype.innerHTML;

Текст печатается с использованием следующей функции:

function typeIt() {
  let counter = 0;
  teletype.innerHTML = cursor;
  teletype.removeAttribute("hidden");
  let i = setInterval(function(){
    teletype.innerHTML = telecopy.substr(0, counter) + cursor;
      counter++;
      if(counter === telecopy.length + 1) {
          clearInterval(i);
      }
  }, 100);
}
typeIt();

Функция typeIt устанавливает переменную счетчика в нуль и свойство innerHTML элемента на экране — в курсор перед тем, как показать измененный элемент пользователю.

После этого JavaScript зацикливается в функции, захватывая все новые буквы из переменной telecopy, каждый раз добавляя курсор в конец, с промежутком в 1/10 секунды или 100 миллисекунд между циклами. Когда количество циклов равняется количеству букв в исходной строке, возвращается функция setInterval.

Добавление курсору мигания

Во время печати и после ее завершения элемент курсора должен регулярно мигать, как будто ожидается продолжение ввода информации. Это создается с помощью анимации CSS:

@keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

Анимация вызывается с помощью этой записи:

#teletype span {
  animation: blink 1s step-end infinite;
}

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

Если Вам нужно более продвинутое решение с большим количеством опций, попробуйте использовать скрипты, такие как, например, TypedJS, созданный Matt Boldt.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Свойство переноса оформления блока для разбитого переводом строки текста
• Создание часов со стрелками
• Фоновые узоры в виде чешуи и шестиугольников с использованием SVG