我正拼命寻找以下打字机效果的变体:我很想在第一个句子建立之后不删除第一个单词:
理想情况下,第一行“我的第一句话”建立起来,然后仅删除“第一句话”,并且第一个单词“我的”停留在屏幕上。然后建立“第二句”,将其删除,然后建立“第三句”,将其删除,然后建立“最后一句”,最后,整个字符串“我的最后一句”保留在屏幕上。预先感谢您一百万的支持!
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'>_</div></div>