@AAGora

Как удалить строку по символам (эффект печатающей машины)?

Изучаю JS. Решил научиться создавать эффект печатающей машины. Логика следующая:
1) Берем строку.
2) Выводим каждый символ строки с определенным интервалом - создаем эффект печати.
3) Пауза.
4) Удаляем посимвольно строку - создаем эффект удаления.

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

Ссылка: https://codepen.io/AAGora/pen/zYKerrY

Дублирую код:
let text = document.querySelector('.text');
let letters = text.textContent.split('');
let result = '';
let cur = '';
let step = 0;

//Выводим слово - начало
function outputsText() {
  result += letters[step];
  text.textContent = result;
  step++;
  if (step == letters.length) clearInterval(first);
}

let first = setInterval(outputsText, 300);
//Выводим слово - конец

//Удаляем слово - начало
function deletesText() {
  result = letters;
  result.pop();
  result = result.join('');
  text.textContent = result;
}
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Одной функцией можно выводить часть слова, определяемую длиной. Которая меняется то в одну, то в другую сторону:
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@ksnk
let control = document.querySelector('.text'), 
        txt= control.textContent, 
        track=[];
    function runit(){
        let c= track.shift();
        if(!c) return ;
        if(c[0]==='pause'){
            setTimeout(runit,c[1]);
        } else if(c[0]==='substr') {
            control.textContent = txt.substr(c[1], c[2]);
            setTimeout(runit, 300);
        }
    }
    // программируем поведение
    for( let i=1;i<=txt.length;i++){
        track.push(['substr',0,i]);
    }
    track.push(['pause',3000]);
    for( let i=txt.length;i>=0;i--){
        track.push(['substr',0,i]);
    }
    runit();


Не оно ?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Санкт-Петербург
от 160 000 до 220 000 ₽
08 мар. 2021, в 10:02
75000 руб./за проект
08 мар. 2021, в 10:00
700 руб./за проект
08 мар. 2021, в 08:37
3000 руб./за проект