Показать Меню
falbar Эффект печатания текста

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

Эффект печатания текста

Несколько статей назад, я рассказывал: как написать на 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 ещё и довольно компактное решение.

Источник
github.com

Подписаться на обновления

sash
sash 16 мая 2016 в 14:34
Привет! Ты чего меня в чс кинул жук???
Глянь чё замутил
var isWatch = localStorage.getItem('isWatch');
if(!isWatch){
localStorage.setItem('isWatch', 1);
isWatch = localStorage.getItem('isWatch');
}
if(isWatch <= 2 ){

$("#typed").typed({

stringsElement: $("#typed-strings"),
typeSpeed: 0,
loop: false,
contentType: "html",
loopCount: false,
showCursor: true,
cursorChar: "<img id='cursor' style='position:absolute; top: 0; left: 0; transition: all 7s; z-index: 1111;' src='/scripts/typed/pen.gif'/>",
callback: function() {
localStorage.removeItem('isWatch');
//console.log(localStorage.getItem('isWatch'))
localStorage.setItem('isWatch', parseInt(isWatch)+1);
$('#cursor').css({top: '-80px', left: '33px'});
}
});
}
Ответить
sash
sash 16 мая 2016 в 14:36
Сделай норм чтобы код можно было в комментарий добавлять
И смайлы :)
Ответить
Антон Кулешов
Антон Кулешов > sash 16 мая 2016 в 20:46
Сейчас не много занят другим, но обязательно учту смайлики и отображение кода в комментариях. Пример глянул, получилось весьма не плохо :)
Ответить