Эффект печатающий машинки на JavaScript

14 марта 2016 Антон Кулешов 3460 0

Сегодня я подготовил ответ на вопрос, который пришел мне на почту. Уже из названия можно понять, о чем пойдет речь. Меня спросили: если у меня скрипты с эффектами набора текста на JavaScript. К сожалению, мне не доводилось использовать у себя в практике данный эффект, но написать его будет несложно. К слову, порывшись у себя в закромах, я смог найти jQuery плагин, решающий данную проблему, о котором мы обязательно поговорим в одной из следующих статей, а пока напишем свой скрипт/сниппет.

Реклама

И так, с чего мы начнём? Как и полагается с HTML разметки, добавляем её между тегами body:

<pre id="demo"></pre>

Элемент pre очень удобен для создания такого рода эффекта. Как вы наверняка знаете при добавлении в него текста, он сохраняет все пробелы и переносы. Это позволяет нам сделать наш код максимально компактным и удобным.

Далее пишем функцию:

function writeTextByJS(id, text, speed){

	var ele = document.getElementById(id),
	    txt = text.join("").split("");

	var interval = setInterval(function(){

		if(!txt[0]){

			return clearInterval(interval);
		};

		ele.innerHTML += txt.shift();
	}, speed != undefined ? speed : 100);

	return false;
};

Собственно, это и есть простая реализация эффекта набора теста пользователем. Функция writeTextByJS() принимает три параметра:

  • id – идентификатор элемента, куда мы будем выводить текст;
  • text – массив с текстом (каждая строка в отдельной ячейке –это сделано для удобства);
  • speed – скорость анимации (по умолчанию 100).

Под капотом writeTextByJS() происходит следующие: в переменной ele мы сохраняем найденный элемент по id, а в txt при помощи join() (объединяем пришедший массив в единую строку) и split() (разбиваем строку на массив символов) помещаем массив из разбитого текста на символы. Далее при каждом исполнении setInterval() проверяем наличие в массиве txt элементов, если их нет, то удаляем interval. В противном случае - добавляем символ в элемент pre, удаляя его из массива.

Теперь нам осталось вызвать нашу функцию после элемента pre c id=demo:

writeTextByJS(
	"demo",
	[
		"Первая строка\n",
		"Вторая строка\n"
	]
);

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

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

Гистограммы и не только

8 сентября 2015 Антон Кулешов

Порой на ресурсе приходится отобразить какие-либо статистические данные: будь то сводная диаграмма из нескольких метрик, статистика для геймеров, биржевая сводка и многое другое. Ранее все решалось до боли просто: мы строили нужный график в таблицах excel, а затем, в виде картинки, помещали его у себя на сайте, но что делать, если необходимо подкорректировать данные или они обновляются, скажем, каждые 10 минут? Искать раба? Ну, уж нет, для построения графиков прямо на сайте есть более эффективные методы, и сегодня мы рассмотрим библиотеку morris.

Работа с API Яндекс Метрикой

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

Недавно один пользователь «ВКонтакте» задал мне вопрос: как получить Яндекс токен для работы с API Метрикой? Проблема, по своей сути, не вызывает сложностей, хотя на тот момент я не мог дать исчерпывающего ответа. На поиск решения у «неподготовленного» читателя может уйти весьма продолжительный промежуток времени. В этой статье я рассмотрю простой пример работы с API Яндекс Метрикой и подробно распишу все этапы.

22 эффекта для кнопок

7 февраля 2016 Антон Кулешов

Тенденция делать всё максимально динамичным и ярким - это реалии сегодняшних дней. Каждый элемент дизайна сайта вскоре не будет оставлен без внимания. Сегодня мы поговорим об невероятно интересном и красивом наборе эффектов для кнопок. Думаю мало кто задумывается об эффектах при нажатии, но если создаёшь, к примеру, продающую страницу, то на решение потенциального покупателя может повлиять как размер кнопки, так и цвет, и даже сам эффект при клике.