Как в 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 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

#SaveUkraine