Эффект печатающегося текста на JS
Как с пользой можно применить эффект печатающегося текста на сайтах? Первое, что приходит в голову - для фиксирования внимания посетителей на нужной информации. Появляющийся текст по одной букве, имитирующий эффект печатной машинки, будет выделяться от статичного контента. Идея достойная, осталось только её реализовать и тут без JS никак не обойтись.
Печатающийся текст будет выводиться на HTML странице внутри тега <pre></pre>. Этот тег позволяет выводить текст в таком же виде, как он был набран в редакторе, сохраняя пробелы и переносы строк.
Алгоритм действий
Прежде чем приступить к написанию JS кода, набросаем в голове порядок действий:
- объявим переменные с необходимыми данными
- создадим функцию, печатающую один символ через определенный промежуток времени
- печатаем первый символ
- увеличиваем счетчик символов на единицу
- проверяем, не закончились ли строки и сам текст
- очищаем установленный таймаут
- зацикливаем функцию
JS код
Создадим переменную text и поместим в неё массив выводимого печатающегося текста, состоящего из строк.
const text = [
'Ты у меня одна,\n',
'Словно в ночи луна,\n',
'Словно в году весна,\n',
'Словно в степи сосна.\n'
];
А теперь представим, что перед нами чистый лист бумаги, заправленный в печатную машинку. Все показатели на нуле - пока нет линий и букв. Создадим ещё три переменные:
let line = 0; // начальная линия текста
let count = 0; // счетчик позиции букв
let result = ''; // получаемый текст на выходе
Создадим функцию, рисующую строки. В теле функции инициализируем переменную, запускающую событие через определенный промежуток времени. Метод setTimeout позволит выполнить, указанное внутри стрелочной функции действие, через заданное количество времени в миллисекундах.
Функция typeLine() добавит в result первый символ в первую строку печатающегося текста. Для этого обратимся к тексту, как к массиву. После этого, выведем печатающийся текст на HTML странице, в теге pre. Получим pre по селектору и для большей реалистичности, в конце каждого символа, добавим символ вертикальной черты.
let line = 0;
let count = 0;
let result = '';
function typeLine() {
let interval = setTimeout(
() => {
result += text[line][count]
document.querySelector('pre').innerHTML =result +'|';
К этому моменту функция typeLine() напечатала первый символ - букву "Т". Теперь надо печатать дальше - наращивать переменную count на один символ.
count++;
Само по себе ничего не произойдет, поэтому создадим условие. Первым делом нужно проверить, не закончилась ли строка. Если count больше или равен длине строки, то обнуляем счетчик.
if (count >= text[line].length) {
count = 0;
Дальше задаем условие, что делать, когда закончатся все текстовые линии. Тогда, мы остановим наш таймаут и зациклим вывод функции, вызвав её повторно.
line++;
if (line == text.length) {
clearTimeout(interval);
document.querySelector('pre').innerHTML =result;
return true;
}
}
typeLine();
}, 200)
}
typeLine();
-
Создано 06.01.2020 10:52:59
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.