Показать Меню
falbar Эффект печатающий машинки

Эффект печатающий машинки на 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:

<script type="text/javascript">
	writeTextByJS(
		"demo",
		[
			"Первая строка\n",
			"Вторая строка\n"
		]
	);
</script>

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

Подписаться на обновления

Комментариев еще не оставлено