VintageTxt jQuery Plugin
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
.gitattributes
.gitignore
README.md
jquery.vintageTxt.css
jquery.vintageTxt.js
vintagetxt.jquery.json

README.md

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