A Pen by Riley Shaw.

index.html

<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>

script.js

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();

style.css

body {
  background-color: black;
  color: #55ff55;
  font-family: monospace;
}
.output {
  color: white;
}
.active:after {
  content: '_';
}

Terminal-Display.markdown

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.