Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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