Increase typing speed on automatically typing javascript code
0
I currently have a Javascript code that allows text to be automatically typed to the screen. However, I can't figure out how to make the typing speed faster. Right now, it is taking too long for the whole code to be displayed. I'm trying to get the "typerwriter" effect to display faster.
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 = 30;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>Any help would be appreciated!
javascript html css
asked Nov 21 '18 at 18:46
AlyssaAlyssa
197
add a comment |
0
I currently have a Javascript code that allows text to be automatically typed to the screen. However, I can't figure out how to make the typing speed faster. Right now, it is taking too long for the whole code to be displayed. I'm trying to get the "typerwriter" effect to display faster.
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 = 30;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>Any help would be appreciated!
javascript html css
asked Nov 21 '18 at 18:46
AlyssaAlyssa
197
Have you tried adjusting the typeSpeed property?
– devlin carnate
Nov 21 '18 at 18:52
yes, but it doesn't seem to be doing much
– Alyssa
Nov 21 '18 at 19:00
1
Oh, i figured it out. It had to do with the integer at the end of the tempTypeSpeed equation!
– Alyssa
Nov 21 '18 at 19:02
You can either answer your own question or delete the question.
– devlin carnate
Nov 21 '18 at 19:36
add a comment |
0
0
0
I currently have a Javascript code that allows text to be automatically typed to the screen. However, I can't figure out how to make the typing speed faster. Right now, it is taking too long for the whole code to be displayed. I'm trying to get the "typerwriter" effect to display faster.
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 = 30;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>Any help would be appreciated!
javascript html css
asked Nov 21 '18 at 18:46
AlyssaAlyssa
197
I currently have a Javascript code that allows text to be automatically typed to the screen. However, I can't figure out how to make the typing speed faster. Right now, it is taking too long for the whole code to be displayed. I'm trying to get the "typerwriter" effect to display faster.
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 = 30;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>Any help would be appreciated!
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 = 30;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div> 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 = 30;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 100;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>javascript html css
javascript html css
asked Nov 21 '18 at 18:46
AlyssaAlyssa
197
asked Nov 21 '18 at 18:46
AlyssaAlyssa
197
asked Nov 21 '18 at 18:46
AlyssaAlyssa
197
asked Nov 21 '18 at 18:46
AlyssaAlyssa
197
asked Nov 21 '18 at 18:46
AlyssaAlyssa
197
197
Have you tried adjusting the typeSpeed property?
– devlin carnate
Nov 21 '18 at 18:52
yes, but it doesn't seem to be doing much
– Alyssa
Nov 21 '18 at 19:00
1
Oh, i figured it out. It had to do with the integer at the end of the tempTypeSpeed equation!
– Alyssa
Nov 21 '18 at 19:02
You can either answer your own question or delete the question.
– devlin carnate
Nov 21 '18 at 19:36
add a comment |
Have you tried adjusting the typeSpeed property?
– devlin carnate
Nov 21 '18 at 18:52
yes, but it doesn't seem to be doing much
– Alyssa
Nov 21 '18 at 19:00
1
Oh, i figured it out. It had to do with the integer at the end of the tempTypeSpeed equation!
– Alyssa
Nov 21 '18 at 19:02
You can either answer your own question or delete the question.
– devlin carnate
Nov 21 '18 at 19:36
Have you tried adjusting the typeSpeed property?
– devlin carnate
Nov 21 '18 at 18:52
Have you tried adjusting the typeSpeed property?
– devlin carnate
Nov 21 '18 at 18:52
yes, but it doesn't seem to be doing much
– Alyssa
Nov 21 '18 at 19:00
yes, but it doesn't seem to be doing much
– Alyssa
Nov 21 '18 at 19:00
1
1
Oh, i figured it out. It had to do with the integer at the end of the tempTypeSpeed equation!
– Alyssa
Nov 21 '18 at 19:02
Oh, i figured it out. It had to do with the integer at the end of the tempTypeSpeed equation!
– Alyssa
Nov 21 '18 at 19:02
You can either answer your own question or delete the question.
– devlin carnate
Nov 21 '18 at 19:36
You can either answer your own question or delete the question.
– devlin carnate
Nov 21 '18 at 19:36
add a comment |
2 Answers
2
active
oldest
votes
0
Your setupTypewriter() function has some initial configuration variables defined at the top. Looking at the function, it appears that increasing typeSpeed from 100 should increase the typing speed.
answered Nov 21 '18 at 19:01
brianespinosabrianespinosa
1,583716
add a comment |
0
I would change the typeSpeed property and then use it instead of the constant 100 value that you have in 2 places. The smaller that typeSpeed number the faster you'll type. Also calculate the typespeed for the space char based on it. I've modified your snippet below.
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 50,
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 = typeSpeed/3;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>answered Nov 21 '18 at 19:15
J. SchmaleJ. Schmale
1065
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418704%2fincrease-typing-speed-on-automatically-typing-javascript-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Your setupTypewriter() function has some initial configuration variables defined at the top. Looking at the function, it appears that increasing typeSpeed from 100 should increase the typing speed.
answered Nov 21 '18 at 19:01
brianespinosabrianespinosa
1,583716
add a comment |
0
Your setupTypewriter() function has some initial configuration variables defined at the top. Looking at the function, it appears that increasing typeSpeed from 100 should increase the typing speed.
answered Nov 21 '18 at 19:01
brianespinosabrianespinosa
1,583716
add a comment |
0
0
0
Your setupTypewriter() function has some initial configuration variables defined at the top. Looking at the function, it appears that increasing typeSpeed from 100 should increase the typing speed.
answered Nov 21 '18 at 19:01
brianespinosabrianespinosa
1,583716
Your setupTypewriter() function has some initial configuration variables defined at the top. Looking at the function, it appears that increasing typeSpeed from 100 should increase the typing speed.
answered Nov 21 '18 at 19:01
brianespinosabrianespinosa
1,583716
answered Nov 21 '18 at 19:01
brianespinosabrianespinosa
1,583716
answered Nov 21 '18 at 19:01
brianespinosabrianespinosa
1,583716
answered Nov 21 '18 at 19:01
brianespinosabrianespinosa
1,583716
1,583716
add a comment |
add a comment |
0
I would change the typeSpeed property and then use it instead of the constant 100 value that you have in 2 places. The smaller that typeSpeed number the faster you'll type. Also calculate the typespeed for the space char based on it. I've modified your snippet below.
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 50,
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 = typeSpeed/3;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>answered Nov 21 '18 at 19:15
J. SchmaleJ. Schmale
1065
add a comment |
0
I would change the typeSpeed property and then use it instead of the constant 100 value that you have in 2 places. The smaller that typeSpeed number the faster you'll type. Also calculate the typespeed for the space char based on it. I've modified your snippet below.
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 50,
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 = typeSpeed/3;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>answered Nov 21 '18 at 19:15
J. SchmaleJ. Schmale
1065
add a comment |
0
0
0
I would change the typeSpeed property and then use it instead of the constant 100 value that you have in 2 places. The smaller that typeSpeed number the faster you'll type. Also calculate the typespeed for the space char based on it. I've modified your snippet below.
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 50,
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 = typeSpeed/3;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>answered Nov 21 '18 at 19:15
J. SchmaleJ. Schmale
1065
I would change the typeSpeed property and then use it instead of the constant 100 value that you have in 2 places. The smaller that typeSpeed number the faster you'll type. Also calculate the typespeed for the space char based on it. I've modified your snippet below.
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 50,
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 = typeSpeed/3;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 50,
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 = typeSpeed/3;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 50,
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 = typeSpeed/3;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
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();#top{
height: calc(100vh);
padding: 4em;
color: rgba(255,255,255,.75);
}
.var-highlight {
color: #4d9cd6;
}
.string-highlight {
color: rgba(253, 149, 90, 0.8);
}
.object {
color: #9cdcfe;
}
.equal {
color: #ffffff;
}
.paranthesis {
color: #f1d700;
}
.objectProp {
color: #9cdcfe;
}
.array {
color: #da70d6;
}
pre {
color: #ffffff;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
margin-top: 6%;
margin-left: 4%;
}
#typewriter:after {
content: "|";
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.fa-chevron-down {
color: white;
position: absolute;
bottom: 0;
margin-bottom: 1%;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container-fluid" id="top">
<pre id="typewriter">
<span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
<span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
<span class="objectProp"> occupation:</span> <span class="string-highlight">'UI Engineer'</span>,
<span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
<span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
<span class="string-highlight">'Clean code'</span>,
<span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
<span class="paranthesis">}</span>; </pre>
</div>answered Nov 21 '18 at 19:15
J. SchmaleJ. Schmale
1065
answered Nov 21 '18 at 19:15
J. SchmaleJ. Schmale
1065
answered Nov 21 '18 at 19:15
J. SchmaleJ. Schmale
1065
answered Nov 21 '18 at 19:15
J. SchmaleJ. Schmale
1065
1065
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418704%2fincrease-typing-speed-on-automatically-typing-javascript-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you tried adjusting the typeSpeed property?
– devlin carnate
Nov 21 '18 at 18:52
yes, but it doesn't seem to be doing much
– Alyssa
Nov 21 '18 at 19:00
1
Oh, i figured it out. It had to do with the integer at the end of the tempTypeSpeed equation!
– Alyssa
Nov 21 '18 at 19:02
You can either answer your own question or delete the question.
– devlin carnate
Nov 21 '18 at 19:36