jQuery Vintage Text

Slap a vintage looking text terminal on your webpage. Have it type something. Then type back!

Quick start

Get the Plugin:

Get these two files:

• jquery.vintageTxt.js
• jquery.vintageTxt.css

Load them up in your project. Make sure you have jQuery 1.7 or later, as well.

Create a container div:

<div id="foo"></div>

Call the vintageTxt() function

$('#foo').vintageTxt();

Features

• Green Scanlines
• Optional image overlay/border
• Blinking cursor with 'enter key' input
• Self-typing text effect

Documentation

Options:

• text: An array of text. One line per array element.
• overlayImage: The path to an image file to overlay the sreen
• txtSpeed: The speed at which each letter is drawn (30ms)
• linePause: The duration of the pause between each line (800ms)
• maxRows: The maximum number of text lines shown at once (10)
• promptEnabled: Show an input prompt underneath text
• autoStart: Begin typing the text as soon as the plugin loads
• onEnterKey: Callback function for the enter keypress
• onFinishedTyping: Callback for when all the text has been typed

A more robust example:

$('#foo').vintageTxt({
  text: ["And I think to myself,","what a wonderful world.","Oooh, yeah..."],
  textSpeed: 150,
  linePause: 500,
  promptEnabled: false,
  onFinishedTyping: function() {
    $('#foo').delay(500).fadeOut(2000);
  }
});

Credits

http://www.wittworksproductions.com/2012/12/scan-lines-with-javascript/

http://www.websanova.com/tutorials/jquery/the-ultimate-guide-to-writing-jquery-plugins#.UTPqr4e4bVN