jQuery Typewriter Plugin

“In the old days, writers used to sit in front of a typewriter & stare out of the window. Nowadays, because of the marvels of convergent technology, the thing you type on & the window you stare out of are now the same thing.”

Douglas Adams

A lightweight jQuery plugin to add a gradual typewriter 'letter-by-letter' reveal that is great for adding emphasis to a header or content.

View on GitHub View Demo Page

Instructions

Download jquery.typewriter.js and included sound file. Put them into your project's root directory.

Add Links in your HTML

Paste the sound file and appropriate jQuery files into your HTML before the closing body tag as seen below.


	<audio class="sound" src="typewriter.wav"></audio>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<script src="js/jquery.typewriter.js"></script>

Add CSS Information

Add the following code to your CSS file


	.typeAction {
		visibility:hidden;
	}
	span {
		padding-left:2px;
		animation: blink 700ms steps(1) infinite: ;
	  -webkit-animation: blink 700ms steps(1) infinite;
	}
		@keyframes blink { 50% { color: transparent; } }
		@-webkit-keyframes blink { 50% { color: transparent; } }
	}

Initialize the Typewriter

Paste the following code inside your primary JavaScript file to input and start the effect.

Note: Replace the 'h1' with the text element you'd like to focus the effect on.


	$(function() {
		$('h1').typewriter({
		});
	});

Check out your Customization Options!

sound (default:false) : Setting to true turns on the typewriter sound effect.

cursorVisible (default:true) : Adjusting to false makes the blinking cursor disappear.

cursorColor : will be a shade of grey unless otherwise set.

randomTypeSpeed (default:true) : setting to false will make the typing speed rhythmic.


	$(function() {
		$('h1').typewriter({
			sound:true,
			cursorVisible:false,
			cursorColor:"#551A8B",
			randomTypeSpeed:false,
		});
	});

Made by Allison Tarr