Имитация набора текста

Различные решения по имитации набора текста.

Простое решение на js

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 : 5);

	return false;
};

jQuery(document).ready(function() {
	writeTextByJS(
	  "demo",
	   [
		   "Первое предложение (не важно какой длины).\n",
		   "\n",
		   "Второе предложение\n",	
		   "\n",	
		   "В 2001 году одной из первых в России компания СКАТ получила сертификат соответствия ISO 9001 «Системы менеджмента качества. Требования» в авторитетном сертификационном органе TUV (Германия).\n",
		   "\n",
		   "В течение 17 лет система управления компанией непрерывно развивается и улучшается, ориентируясь на требования потребителей."
		]
	);
});

Начать печать текста, только при появлении на экране, добавляем скрипт viewportChecker

jQuery(document).ready(function() {
	
jQuery('#demo').viewportChecker({
	offset: 200,	
	callbackFunction: function(){  
	
		writeTextByJS(
		  "demo",
		   [
			   "Первое предложение (не важно какой длины).\n",
			   "\n",
			   "Второе предложение\n",	
			   "\n",	
			   "В 2001 году одной из первых в России компания СКАТ получила сертификат соответствия ISO 9001 «Системы менеджмента качества. Требования» в авторитетном сертификационном органе TUV (Германия).\n",
			   "\n",
			   "В течение 17 лет система управления компанией непрерывно развивается и улучшается, ориентируясь на требования потребителей."
			]
		);
		
	}
});

});

Плагин TypeIt

Подключаем плагин (скрипт) typeit.min.js

https://cdnjs.cloudflare.com/ajax/libs/typeit/6.5.1/typeit.es.min.js

Далее инициируем его:

$('#text').typeIt({
     strings: ["This is a great string.", "But here is a better one."],
     speed: 50,
     breakLines: false, // не переносить на новую строку
     autoStart: false
});

У плагина много настроек и можно программировать сложные сценарии ввода текста.

Мигающий курсор

Чтобы рядом с печатающимся текстом был анимированный курсор, нужно прописать для класса .typed-cursor (специально предусмотренный), соответствующие стили.

.typed-cursor {animation: blink 0.7s infinite;}

@keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}

Мигающий курсор (отдельно от TypeIt)

Добавляем в блок текста с предполагаемым тексом

#demo:after {
    content: "";
    background: #03a9f4;
    line-height: 17px;
    margin-left: 3px;
    -webkit-animation: blink 0.8s infinite;
    width: 5px;
    height: 15px;
    display: inline-block;
}

@-webkit-keyframes blink {
  0% {background: rgba(3, 169, 244, 0)}
  50% {background: #03a9f4}
  100% {background: rgba(3, 169, 244, 0)}
}

Animate Typing & Deleting Of Text — animateTyping.js

Ссылка на страницу решения.

Просто подключаем скрипт jquery.animateTyping.js. Вёрстка и все настройки пишется прямо в html (класс animate-typing инициализирует эффект):

<div class="animate-typing"
data-animate-loop="true"
data-type-speed="50"
data-type-delay="200"
data-remove-speed="50"
data-remove-delay="2000"
data-cursor-speed="200">
	Лучшие европейские заводы|
	Гибкие условия поставок|
	Скидки от 20% для партнеров|
</div>

[site-socialshare]