Как в jQuery имитировать печать текста

Демо Скачать

В данной статье вы узнаете как при помощи скрипта можно добиться эффекта пишущей машинки.

Реалистичная пишущая машинка / ввод текста на jQuery

Для начала создадим страницу с обычным шаблоном на HTML и подключим сразу же нашу любимую JS библиотеку:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
	
</body>
</html>

Теперь, внутри тега body создаем блок с идентификатором box:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
	
	<div id="box"></div>
</body>
</html>

После того как вы все сделали, напишем простенький javascript:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script>
	$(function(){
		var $text = "";
		var $count = 0;
		var $maxspeed = 200;

		function type(){
			var $random = Math.floor(Math.random()* $maxspeed);
			setTimeout(type, $random);
			$('#box').append('a');
		}
		type();
	});
	</script>
</head>
<body>
	
	<div id="box"></div>
</body>
</html>

Если запустить в браузере, то в результате будет печататься буква «а» с рандомной скоростью. Усовершенствуем наш скрипт еще больше:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script>
	$(function(){
		var $text = "";
		var $count = 0;
		var $maxspeed = 200;

		function character(start, end, text) {
			return text.substring(start,end);
		}

		function type() {
			var $random = Math.floor(Math.random()* $maxspeed);
			setTimeout(type, $random);
			$('#box').append();
			$count++;
		}
		type();
	});
	</script>
</head>
<body>
	
	<div id="box"></div>
</body>
</html>

Все незнакомые для вас методы и функции рекомендую прогуглить :). Продолжаем разибирать по шагам, сейчас код ничего не выдает, потому что мы убрали из append букву. Немного терпения, и получаем в итоге:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script>
	$(function(){
		var $text = "forwww.com - Блог для веб-разработчиков";
		var $count = 0;
		var $maxspeed = 200;

		function character(start, end, text) {
			return text.substring(start,end);
		}

		function type() {
			var $random = Math.floor(Math.random()* $maxspeed);
			setTimeout(type, $random);
			$('#box').append(character($count, $count+1, $text));
			$count++;
		}
		type();
	});
	</script>
</head>
<body>
	
	<div id="box"></div>
</body>
</html>

Вот и всё, мы с вами создали 2 простенькие функции, которые позволили нам решить данную задачу — сделать «как печатная машинка».

Да, скрипт лучше поместить в конце страницы — это общая рекомендация.

Если на вашем сайте необходимо доработать скрипты, обращайтесь.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *