You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.7 KiB
JavaScript
70 lines
1.7 KiB
JavaScript
4 years ago
|
function setupTypewriter(t) {
|
||
|
|
var HTML = t.innerHTML;
|
||
|
|
|
||
|
|
t.innerHTML = "";
|
||
|
|
|
||
|
|
var cursorPosition = 0,
|
||
|
|
tag = "",
|
||
|
|
writingTag = false,
|
||
|
|
tagOpen = false,
|
||
|
|
typeSpeed = 100,
|
||
|
|
tempTypeSpeed = 0;
|
||
|
|
|
||
|
|
var type = function() {
|
||
|
|
|
||
|
|
if (writingTag === true) {
|
||
|
|
tag += HTML[cursorPosition];
|
||
|
|
}
|
||
|
|
|
||
|
|
if (HTML[cursorPosition] === "<") {
|
||
|
|
tempTypeSpeed = 0;
|
||
|
|
if (tagOpen) {
|
||
|
|
tagOpen = false;
|
||
|
|
writingTag = true;
|
||
|
|
} else {
|
||
|
|
tag = "";
|
||
|
|
tagOpen = true;
|
||
|
|
writingTag = true;
|
||
|
|
tag += HTML[cursorPosition];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!writingTag && tagOpen) {
|
||
|
|
tag.innerHTML += HTML[cursorPosition];
|
||
|
|
}
|
||
|
|
if (!writingTag && !tagOpen) {
|
||
|
|
if (HTML[cursorPosition] === " ") {
|
||
|
|
tempTypeSpeed = 0;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
|
||
|
|
}
|
||
|
|
t.innerHTML += HTML[cursorPosition];
|
||
|
|
}
|
||
|
|
if (writingTag === true && HTML[cursorPosition] === ">") {
|
||
|
|
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
|
||
|
|
writingTag = false;
|
||
|
|
if (tagOpen) {
|
||
|
|
var newSpan = document.createElement("span");
|
||
|
|
t.appendChild(newSpan);
|
||
|
|
newSpan.innerHTML = tag;
|
||
|
|
tag = newSpan.firstChild;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
cursorPosition += 1;
|
||
|
|
if (cursorPosition < HTML.length - 1) {
|
||
|
|
setTimeout(type, tempTypeSpeed);
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
type: type
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var typer = document.getElementById('typewriter');
|
||
|
|
|
||
|
|
typewriter = setupTypewriter(typewriter);
|
||
|
|
|
||
|
|
typewriter.type();
|