О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Эффект печатающий машинки на JavaScript
  • Инструменты
  • Заработок
  • Раскрутка
14 марта 2016 . Антон Кулешов

Эффект печатающий машинки на JavaScript

Сегодня я подготовил ответ на вопрос, который пришел мне на почту. Уже из названия можно понять, о чем пойдет речь. Меня спросили: если у меня скрипты с эффектами набора текста на JavaScript. К сожалению, мне не доводилось использовать у себя в практике данный эффект, но написать его будет несложно. К слову, порывшись у себя в закромах, я смог найти jQuery плагин, решающий данную проблему, о котором мы обязательно поговорим в одной из следующих статей, а пока напишем свой скрипт/сниппет.

И так, с чего мы начнём? Как и полагается с HTML разметки, добавляем её между тегами body:

<pre id="demo"></pre>

Элемент pre очень удобен для создания такого рода эффекта. Как вы наверняка знаете при добавлении в него текста, он сохраняет все пробелы и переносы. Это позволяет нам сделать наш код максимально компактным и удобным.

Далее пишем функцию:

function writeTextByJS(id, text, speed){

    var ele = document.getElementById(id),
      txt = text.join("").split("");

  var interval = setInterval(function(){

      if(!txt[0]){

            return clearInterval(interval);
     };

      ele.innerHTML += txt.shift();
   }, speed != undefined ? speed : 100);

   return false;
};

Собственно, это и есть простая реализация эффекта набора теста пользователем. Функция writeTextByJS() принимает три параметра:

  • id – идентификатор элемента, куда мы будем выводить текст;
  • text – массив с текстом (каждая строка в отдельной ячейке –это сделано для удобства);
  • speed – скорость анимации (по умолчанию 100).

Под капотом writeTextByJS() происходит следующие: в переменной ele мы сохраняем найденный элемент по id, а в txt при помощи join() (объединяем пришедший массив в единую строку) и split() (разбиваем строку на массив символов) помещаем массив из разбитого текста на символы. Далее при каждом исполнении setInterval() проверяем наличие в массиве txt элементов, если их нет, то удаляем interval. В противном случае - добавляем символ в элемент pre, удаляя его из массива.

Теперь нам осталось вызвать нашу функцию после элемента pre c id=demo:

writeTextByJS(
  "demo",
   [
       "Первая строка\n",
       "Вторая строка\n"
    ]
);

Как это работает можно посмотреть на странице «демо». Что хочется ещё добавить, при написании данного эффекта можно достичь очень интересных и креативных результатов. К примеру, довольно давно я выкладывал пост в паблике вк, где можно было увидеть сайт резюме. При посещении этого сайта вы увидите, как он «на глазах» динамично создаться в окне браузера.

26 285 5
Антон Кулешов
Lex=)
Lex=)
14 сентября 2017
Здравствуйте!

Подскажите пожалуйста как изменить скрипт, чтобы он печатал и стирал несколько заголовков?
Антон Кулешов
Антон Кулешов
14 сентября 2017
Это функция, вы можете её применить к нескольким элементам на странице, если я правильно вас понял. Или вам нужно чтобы она поверх текста перепечатывала?
Lex=)
Lex=)
14 сентября 2017
Нужно как бы исправление. Сначала печатается один текст, потом он стирается и печатается другой, затем следующий если нужно.
Антон Кулешов
Антон Кулешов
16 сентября 2017
Можно переделать конечно этот код, но у меня на сайте есть уже готовый плагин - https://falbar.one/article/avto-effekt-pechataniya-teksta, которым стоит воспользоваться для вашей задачи.
Сергей Мартыненко
Сергей Мартыненко
28 октября 2019
При переключении вкладок и возвращении через минуту на страницу мы видим беспорядочный набор символов(

Оригинальный lightbox на jQuery

Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание