Skip to content

Instantly share code, notes, and snippets.

@rileyjshaw
Created October 16, 2013 08:48
Show Gist options
  • Save rileyjshaw/7004689 to your computer and use it in GitHub Desktop.
Save rileyjshaw/7004689 to your computer and use it in GitHub Desktop.
A Pen by Riley Shaw.
<main class="prompt">
<p>The future ain't what it used to be</p>
<p>It's so crowded, nobody comes here anymore</p>
<p>I really didn't say everything I said</p>
</main>
var $lines = $('.prompt p');
$lines.hide();
var lineContents = new Array();
var terminal = function() {
var skip = 0;
typeLine = function(idx) {
idx == null && (idx = 0);
var element = $lines.eq(idx);
var content = lineContents[idx];
if(typeof content == "undefined") {
$('.skip').hide();
return;
}
var charIdx = 0;
var typeChar = function() {
var rand = Math.round(Math.random() * 150) + 25;
setTimeout(function() {
var char = content[charIdx++];
element.append(char);
if(typeof char !== "undefined")
typeChar();
else {
element.append('<br/><span class="output">' + element.text().slice(9, -1) + '</span>');
element.removeClass('active');
typeLine(++idx);
}
}, skip ? 0 : rand);
}
content = 'echo "' + content + '"';
element.append('~$ ').addClass('active');
typeChar();
}
$lines.each(function(i) {
lineContents[i] = $(this).text();
$(this).text('').show();
});
typeLine();
}
terminal();
body {
background-color: black;
color: #55ff55;
font-family: monospace;
}
.output {
color: white;
}
.active:after {
content: '_';
}

Terminal Display

Use JavaScript to hide paragraphs in a "terminal" div, then return them using fake "echo" commands.

Features:

  • Typing speed is semi-random to appear more human
  • A "skip" variable exists, but isn't used in this demo. Setting skip to 1 outputs the rest of the text almost immediately.

I used this to promote "hack nights" at my University (qhack.ca). Feel free to use it wherever!

A Pen by Riley Shaw on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment