Как НЕ удалить первое слово в эффекте пишущей машинки JS? - PullRequest
Новая
       32

Как НЕ удалить первое слово в эффекте пишущей машинки JS?

0 голосов
/ 17 октября 2018

Я отчаянно ищу вариант эффекта пишущей машинки ниже: я бы хотел, чтобы НЕ было удалено первое слово после того, как было сформировано первое предложение:

В идеале, первая строка "Мой первый"предложение «накапливается», тогда удаляется только «первое предложение», а первое слово «Мой» остается на экране.Затем формируется «второе предложение», удаляется, затем создается «третье предложение», удаляется, а затем формируется «последнее предложение», и, наконец, вся строка «Мое последнее предложение» остается на экране.Большое спасибо за поддержку!

PS: вот ссылка для удобного редактирования: codepen.io / stevenkeen / pen / ZqrBWg 

// function([string1, string2], target id, [color1,color2], initial pause, final pause)
consoleText(
  [
    "My first sentence",
    "My second sentence",
    "My third sentence",
    "My last sentence"
  ],
  "text",
  ["tomato", "rebeccapurple", "lightblue"],
  5000,
  500000
);

function consoleText(words, id, colors, initialPause, finalPause) {
  if (colors === undefined) colors = ["#fff"];
  var visible = true;
  var con = document.getElementById("console");
  var letterCount = 1;
  var x = 1;
  var initialCount = 0;
  var waiting = false;
  var target = document.getElementById(id);
  var justStarted = true;
  target.setAttribute("style", "color:" + colors[0]);
  window.setInterval(function() {
    if (initialCount < initialPause) {
      initialCount += 120;
    } else if (letterCount === 0 && waiting === false) {
      waiting = true;
      target.innerHTML = words[0].substring(0, letterCount);
      window.setTimeout(function() {
        var usedColor = colors.shift();
        var usedWord = words.shift();
        x = 1;
        target.setAttribute("style", "color:" + colors[0]);
        letterCount += x;
        waiting = false;
      }, 1000);
    } else if (letterCount === words[0].length + 1 && waiting === false) {
      waiting = true;
      window.setTimeout(function() {
        x = -1;
        letterCount += x;
        waiting = false;
      }, words.length === 1 ? finalPause : 1000);
    } else if (waiting === false) {
      target.innerHTML = words[0].substring(0, letterCount);
      letterCount += x;
    }
  }, 120);
  window.setInterval(function() {
    if (visible === true) {
      con.className = "console-underscore hidden";
      visible = false;
    } else {
      con.className = "console-underscore";

      visible = true;
    }
  }, 400);
}
@import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
  background: #111;
}
.hidden {
  opacity:0;
}
.console-container {
 
  font-family:Khula;
  font-size:4em;
  text-align:center;
  height:200px;
  width:600px;
  display:block;
  position:absolute;
  color:white;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.console-underscore {
   display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}
<div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>&#95;</div></div>
...