Реклама
timeweb
falbar Авто эффект печатания текста

Авто эффект печатания текста

31 марта 2016 3485 0

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

Реклама

Почему именно этот плагин? Если помните, то в предыдущей статье у нас получилась простая легковесная функция, где брался исходный текст и через определённый интервал посимвольно отрисовывался на странице. В принципе, задача решена, но не учтено несколько моментов:

  • В тексте могут присутствовать оформительные HTML теги или ссылки;
  • Нет привычной анимации курсора из текстовых редакторов.

В typed это уже всё реализовано и даже чуть больше. И так приступим, подключаем в самом начале стили и скрипты:

<link href="typedCursor.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="typed.min.js" type="text/javascript"></script>

В файле typedCursor.css лежат стили для оформления нашего курсора при помощи CSS3. Далее добавляем HTML код:

<div id="typed-strings">
	<!-- Сюда помещаем текст для вывода -->
</div>
<span id="typed" style="white-space: pre;"></span>

И остаётся вызвать появившийся новый метод:

$(function(){

	$("#typed").typed({

		stringsElement: $("#typed-strings"),
		typeSpeed: 35,
		backDelay: 495,
		loop: false,
		contentType: "html",
		loopCount: false
	});
});

Применяем его к элементу, в который будем выводить текст. Далее пробежимся по настройкам, которые указаны:

  • stringsElement – в свойстве указываем откуда брать исходный текст;
  • typeSpeed – задаём скорость набора;
  • backDelay – отсчет времени перед началом удаления строки;
  • loop – зацикленность;
  • contentType – в этом свойстве указываем на то, как воспринимать исходный текст (HTML или text);
  • loopCount – число повторений набора текста, работает при включённом параметре loop.

Но это ещё не всё у Typed есть ещё 6 свойств:

  • strings – исходный текст можно указать в этом параметре - это массив, в ячейку которого добавляется строка текста;
  • startDelay – отсчет времени перед началом отработки плагина;
  • backSpeed – скорость удаления символов;
  • showCursor – флаг на отображение курсора;
  • cursorChar – вид курсора, изначально установлен «|»;
  • attr – это свойство добавляет атрибут, в который будет выводиться текст.

Ещё у скрипта осталось 3 «полезных» метода:

  • callback() – отрабатывает после завершения вывода текста;
  • preStringTyped() – срабатывает перед началом набора строки;
  • onStringTyped() – этот метод отрабатывает после завершения набора строки.

Пример, который мы рассмотрели в статье можно увидеть на странице «демо», а в заключение хочу добавить, что плагин typed (сайт плагина) ещё и довольно компактное решение.

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