Skip to content

Instantly share code, notes, and snippets.

@neodigm

neodigm/a_human_typing_terminal.js

Last active July 12, 2020 07:37
Show Gist options
  • Save neodigm/3fdefa2908309885ee9db422f94419d1 to your computer and use it in GitHub Desktop.
Save neodigm/3fdefa2908309885ee9db422f94419d1 to your computer and use it in GitHub Desktop.
Download ZIP
Progressively type rows of text as if entered by a human into a terminal(s).
Raw
a_human_typing_terminal.js
"use strict";
// Progressively type rows of text as if entered by a human
var doHumanTyping = (function(_d){
var oTerms = {}, aTerms = [];
var oSetI = null, INTERX = 38;
return {
"play": function(_query, _fCB){
var elTerm = _d.querySelector(_query);
var elTmpl = _d.querySelector("[data-a-human-typing-tmpl='"+elTerm.dataset.aHumanTyping+"']");
if( elTerm && elTmpl ){
oTerms = {
"term": elTerm, "CB": _fCB,
"nRows": elTmpl.dataset.aHumanTypingRows,
"nCurrPar": 0, "nCurrChr": 0, "sMUall": "", "sMU": "",
"aPars": [].slice.call(elTmpl.querySelectorAll("P"))
.map(function(para){ // Make arrays from templ paragraphs
return para.innerHTML.split("");
})
};
aTerms.push(oTerms);
oSetI = setInterval( doHumanTyping.tick, INTERX);
}
},
"tick": function(){
//var sMU = "";
aTerms.forEach(function( oT ){
if( doHumanTyping.f1210() > 6){
oT.sMU = "<p>";
oT.sMU += oT.aPars[ oT.nCurrPar ].slice(0, oT.nCurrChr++).join("");
oT.sMU += "</p>";
if( oT.nCurrChr == (oT.aPars[ oT.nCurrPar ].length + 1) ){
oT.nCurrChr = 0; // reset char and paragraph
if( ++oT.nCurrPar !== (oT.aPars.length) ) oT.sMUall += oT.sMU;
}
oT.term.innerHTML = oT.sMUall + oT.sMU;
}
});
},
"f1210": function(){ return (Math.floor(Math.random() * (10) + 1)); }
}
})(document);
doHumanTyping.play(".js-term-1",function(){
doHumanTyping.play(".js-term-1");
});
doHumanTyping.play(".js-term-2");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Groovy</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap" rel="stylesheet">
</head>
<body>
<article class="js-term-1 l-term-type-cont"
data-a-human-typing="seo">
</article>
<article class="js-term-2 l-term-type-cont"
data-a-human-typing="ppc">
</article>
<output class="hidden" data-a-human-typing-tmpl="seo"
data-a-human-typing-rows="4">
<p>Effective Digital Marketing</p>
<p>Our work helps both large and small companies find new customers in a more effective manner.</p>
<p>We envision, manage, design, program, and deliver.</p>
<p>Accept nothing less than the most powerful next-generation SEO platform, with cutting-edge technology and service innovations that deliver the future of organic search result positioning.</p>
<p>qqqq</p>
<p>qqqq</p>
<p>qqqq</p>
</output>
<output class="hidden" data-a-human-typing-tmpl="ppc"
data-a-human-typing-rows="2">
<p>If you discovered a resource that would increase customer loyalty, as well as lower customer engagement costs, wouldn't you use it? Your company's Web site is a resource that has great potential to reach these goals, but may be relatively untapped.</p>
<p>Truly effective Web sites are an elusive goal for most organizations.</p>
<p>There’s never been a more perfect storm of change — or a more perfect confluence of opportunities to seize.</p>
<p>Let us build you a tweaked-into-oblivion swiss army chainsaw website that persuades and converts.</p>
</output>
<script src="script.js"></script>
<style>
.l-term-type-cont {
background-color: #000;
padding: 8px;
margin: 8px;
border-radius: 8px;
min-height: 66px;
min-width: 256px;
}
.l-term-type-cont P {
color: #e3eaa5;
font-size: 18px;
font-family: 'Share Tech Mono', monospace;
line-height: .98;
margin: 2px 2px 8px 2px;
}
.hidden, .hide {
display: none;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment