Печатающийся текст на экране (Javascript)

Скрипт на JavaScript поочерёдно печатает заголовки статей в виде ссылок. Текст появляется посимвольно, как на печатной машинке. После короткой паузы выводится следующий заголовок, а затем цикл повторяется.

Тексты и адреса ссылок задаются в массиве data. Скорость печатания регулируется параметром typingSpeed, пауза между заголовками - switchTimeout. Оба значения указываются в миллисекундах.

Рекомендую: <a id="Ticker" href="http://example.com/default_link">Здесь можно вписать дефолтную ссылку.</a>

<script>
autotypingText( {
	typingSpeed: 50,       // скорость печатания
	switchTimeout: 2000,   // время ожидания перед переключением между элементами
	element: document.getElementById( 'Ticker' ),
	data: [
		{
			text: 'Плагин Webmaster Yandex для WordPress',
			url: 'http://wp-kama.ru/4015'
		},
		{
			text: 'Kama Thumbnail: плагин WordPress для создание картинок-миниатюр записи',
			url: 'http://wp-kama.ru/142'
		},
		{
			text: 'Настраиваем robots.txt для WordPress',
			url: 'http://wp-kama.ru/id_803/pishem-pravilnyiy-robotstxt-dlya-wordpress.html'
		},
		{
			text: 'WP-Cumulus: 3D облако меток на flash (улучшенная русская версия)',
			url: 'http://wp-kama.ru/4271'
		},
		{
			text: 'Плагин для защиты от спама в комментариях WordPress',
			url: 'http://wp-kama.ru/95'
		},
		{
			text: 'Плагин для легкого управления сайтом на WordPress (версия 3)',
			url: 'http://wp-kama.ru/note/plagin-dlya-legkogo-upravleniya-saytom-na-wordpress-versiya-3'
		},
		{
			text: 'Автоматическое растягивание textarea на javascript и jQuery',
			url: 'http://wp-kama.ru/112'
		},
	],
} )

/**
 * Печатание текста - Тиккер
 * @param {object} args
 */
function autotypingText( args ){

	let itemCount = Number( args.data.length );
	let curItemIndex = -1;
	let currentLength = 0;
	let theText = '';

	runTheTicker();

	function runTheTicker(){
		let theHold

		// Переход к следующему элементу
		if( currentLength === 0 ){
			curItemIndex++;
			curItemIndex = curItemIndex % itemCount;
			theText = args.data[curItemIndex].text.replace( /"/g, '-' );
			args.element.href = args.data[curItemIndex].url;
		}

		// Располагаем текущий текст в анкор с печатанием
		args.element.innerHTML = theText.substring( 0, currentLength ) + znak();

		// Преобразуем длину для подстроки и определяем таймер
		if( currentLength !== theText.length ){
			currentLength++;
			theHold = args.typingSpeed;
		}
		else{
			currentLength = 0;
			theHold = args.switchTimeout;
		}

		// Повторяем цикл с учетом задержки
		setTimeout( runTheTicker, theHold );
	}

	function znak(){
		return ( currentLength === theText.length ) ? '' : '|';
	}

}
</script>

Данные из WordPress

В WordPress список ссылок можно сформировать из записей с произвольным полем my_recommended. Получим их заголовки и URL, преобразуем массив в JSON и передадим его в autotypingText():

<?php
$query = new WP_Query( 'meta_key=my_recommended' );
$data = [];

while( $query->have_posts() ){
	$query->the_post();

	$data[] = [
		'text' => get_the_title(),
		'url' => get_permalink()
	];
}

wp_reset_query();

$dataJsObject = json_encode( $data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT );

?>
<script>
autotypingText( {
	typingSpeed: 50,       // скорость печатания
	switchTimeout: 2000,   // время ожидания перед переключением между элементами
	element: document.getElementById( 'Ticker' ),
	data: <?= $dataJsObject ?>,
} );
</script>

Просто печатающийся текст

Если смена ссылок не нужна, используйте функцию printText(). Она постепенно выводит содержимое указанного элемента. Задержка между шагами задаётся переменной letterTimeout.

<div id="my-text">
Этот текст появляется постепенно, словно его набирают на клавиатуре. <br><br>

Скорость печатания задаётся в скрипте. <br><br>

После вывода всего текста анимация останавливается.
</div>

<script>
// init
printText( document.getElementById( 'my-text' ) );

function printText( el ){

	let letterTimeout = 20

	let text = el.innerHTML
	let i = 1

	print__fn() // init

	function print__fn(){

		if( i <= text.length ){
			el.innerHTML = text.substr( 0, i );
			setTimeout( arguments.callee, letterTimeout );
		}

		i++;
	}

}
</script>

Итого

Эффект печатающегося текста на JavaScript, или эффект печатной машинки, позволяет показывать текст постепенно, буква за буквой. В статье разобраны два варианта: циклический вывод заголовков-ссылок и однократная анимация набора текста. Оба примера работают без jQuery и сторонних библиотек. Их можно использовать для блока рекомендаций, сменяющихся надписей или вступительного текста на сайте, в том числе на WordPress.