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