Сегодня я подготовил ответ на вопрос, который пришел мне на почту. Уже из названия можно понять, о чем пойдет речь. Меня спросили: если у меня скрипты с эффектами набора текста на 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"
]
);
Как это работает можно посмотреть на странице «демо». Что хочется ещё добавить, при написании данного эффекта можно достичь очень интересных и креативных результатов. К примеру, довольно давно я выкладывал пост в паблике вк, где можно было увидеть сайт резюме. При посещении этого сайта вы увидите, как он «на глазах» динамично создаться в окне браузера.