O'Reilly

MooTools Typewriter Effect Plugin Upgrade

By on  

Last week I shared my MooTools Typewriter Class with you. It was pretty well received and I got a few feature requests that I've implemented including "backspacing" and character variance delays. I'm not going to explain the old code, so click here to get the full explanation on the class.

MooTools 1.2 Class

//class is in
var Typewriter = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		container: $$('body')[0],
		message: '',
		delay: 150,
		cursor: 0,
		variance: 0,
		backChar: '|',
		backDelay: 30
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
	},
	
	//start the Typewriter
	start: function() {
		
		//for every letter
		for(x = 0; x < this.options.message.length; x++)
		{
			var pace = (this.options.delay * x) + $random(0,this.options.variance);
			var current = this.options.message.charAt(x);
			
			//spit out the letter
			if(current != this.options.backChar)
			{
				var go = this.setLetter.delay(pace,this);
			}
			else
			{
				var go = this.deleteLetter.delay(pace + this.options.backDelay,this);
			}
			
		}
	},
	
	//place the newest letter in the container
	setLetter: function() {
		
		this.options.container.set('html',this.options.container.get('html') + '' + this.options.message.charAt(this.options.cursor));
		
		//increment cursor
		this.options.cursor++;
	},
	
	//deletes a letters -- goes backward
	deleteLetter: function() {
		
		this.options.container.set('html',this.options.container.get('html').substr(0,this.options.container.get('html').length - 1));
		
		//increment cursor
		this.options.cursor++;
	}
	
});

MooTools Usage

var t = new Typewriter({
	container: $('type-here'),
	message: 'This is output from the Typewriter class. This class is small but packs a really good|||||||||||SUPER HUGE punch. Isn\'t MooTools great?',
	delay:90,
	variance:200,
	backChar: '|',
	backDelay:30
}).start();

You'll see three new options:

  • variance: No one types at the same speed for every letter. Variance allows for random letter delay changes.
  • backChar: Which character signifies a backspace?
  • backDelay: How quickly should the typewriter delete?

Click here to view the new version.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • MooTools Window Object Dumping

    Ever want to see all of the information stored within the window property of your browser? Here's your chance. The XHTML We need a wrapper DIV that we'll consider a console. The CSS I like making this look like a command-line console. The MooTools JavaScript Depending on what you have loaded...

  • Basic AJAX Requests Using MooTools 1.2

    AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time. Step 1: The XHTML Here we define two links...

Discussion

  1. Catar4x

    It works with the mootools 1.2dev version ?
    I will try this upgrade but the first doesn’t works.
    It’s perhaps my other scripts that fail the implementation of the code.

  2. Keep in mind that so much setTimeouts slows down everything. Maybe you should try creating an Fx with a transition to make that variance effect, that way you’ll use one setInterval instead of 100+ setTimeouts simultaneously.

    Other than that, very nice thingy!

  3. Would be nice if it could loop through x amount strings and continue looping.

    Is .periodical() the only way this can be done since since time cannot be calculated due to the speed variance?

    Surely someone knows a better way to loop function simultaneously after completion?

    I will have a go at it myself.

  4. One idea I have would be to use the existing text in the container, for instance rather than having to use the “message:” option in javascript, I would like to have the text already in the container.

  5. Yeah I have done that. All the text is already in the container and hidden. And I have added a small bit of code that then splits the text into an array and removes the hidden style/class.

    I’m just having trouble getting it to loop.

  6. OK I have finally managed to modify this script so that it can rotate through multiple messages.

    I took Leo Newballs comment on-board and fi there’s already a string in the container you specify in the options, it overrides the default message with this string and splits it into an array.

    If backChar is specified in the options, It randomly injects a character, or a block of characters(major typo) and cuts it into a random position within your string so it looks like authentic typing (i hope) and then deletes them.

    Does anyone fancy testing it?

  7. I love testing new items! I would love to give it a go!

  8. How will i send the code? Shall I just post it on here?

  9. Send you a message through your contact page Liam :-D

  10. tamamma

    Hi there, first of all thank you for everything. This website is very useful.
    I would like to know if there is the possibility to insert any html tag for a part of the text of the typewriter(for example bold or ecc) it would be very nice!!
    Thank you again

  11. @tamamma: Adding HTML in the message is not possible since the typewriter goes character by character. You would want to create something more advanced.

  12. Steve

    Firstly I’d like to echo the “thank you for everything”, this is perfect for what i’m working on except I need to be able to insert line breaks, any ideas on a simple way to go about this?

  13. @Steve: Sorry, this wasn’t set up for that. You could, however, add a special charachter into your string (like a “*”), and in the start() or setLetter() methods check for, and add a “
    ” instead of the special character.

  14. Same answer as the previous question.

    @tamamma: Adding HTML in the message
    is not possible since the typewriter
    goes character by character. You would
    want to create something more
    advanced.

  15. chris

    Is there any way to reset the text on an event? i.e. ‘mouseleave’

    I need it to function in a similar way to the Fx chain property –
    e.g. chain:cancel etc.

    At the moment I have the text appearing under each icon on a menu when ‘mouseenter’ occurs, with a simple element level text reset on ‘mouseleave’. However this causes some odd results when the Typewriter effect hasn’t finished ‘typing’ before the mouse moves off and then back on again, or onto another!

    Great work btw.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...