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

31 марта 2016 Антон Кулешов 2886 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
Читайте далее

Адаптивный слайдер на jQuery

20 августа 2014 Антон Кулешов

Когда часто приходиться ставить слайдеры на сайт парой хочется найти несколько вариантов, которые подходили бы к большинству проектов. Никто не хочет возиться с подключением и тратить время на изменение CSS стилей. ResponsiveSlides в переводе с английского отзывчивые слайды могут стать одним из таких вариантов.

Задний фон для сайта в виде частиц

14 октября 2014 Антон Кулешов

Если вы хотите добавить интересный эффект к себе на сайт, то предлагаю воспользоваться jQuery плагином particleground. При помощи этого дополнения вы сможете реализовать задний фон сайта в виде меняющихся и движущихся частиц.

Как сделать всплывающие подсказки, разбираемся с WebUI Popover

14 января 2015 Антон Кулешов

В сегодняшней статье я хочу рассмотреть тему, которая появилась еще во время зарождения первых пользовательских интерфейсов, в частности Windows 3.11 (если кто помнит), и прочно закрепилась во всех приложениях, нацеленных на работу с пользователем – всплывающие подсказки.