Javascript Text Typing Animation

Type Away

Have you every wanted to create a smooth, natural text typing animation on your web page?  texttype.js makes this so easy literally anyone can do it.  texttype.js is a singletiny file you can include on your webpage and create smooth “typing” text animations with a single, simple function call.

Let’s see an example:


<!DOCTYPE html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/texttype.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        texttype("textDiv", "Hello World, this is TextType!", 100, 100);
      });
    </script>
  </head>
  <body>
    <div id="textDiv"></div>
  </body>
</html>

That’s it, we’re done.
Check out the page here.

The Function Call:

$(document).ready(function() {
   texttype("textDiv", "Hello World, this is TextType!", 100, 100);
});

Our function call is wrapped in jQuery’s document.ready function, which makes sure, as one might expect, that the document is “ready” before processing the following functions within it.  Keep in mind that you must currently have jQuery on your page to use this file.  Don’t sweat it! You can add jQuery to your page just like above, with the line:  <script src=”http://code.jquery.com/jquery-latest.js”></script&gt;

The Parameters to the Function:
Remember, the textType is instantiated by this function: texttype(“textDiv”, “some_text_here”, #, #); 
As you can see, we have 4 parameters.

The first parameter, here “textDiv” represents the div, or container, in which you want your text to be typed into.  This div should be nothing more than an empty div on your page, but it must have an ID.  In our example we had: <div id=”textDiv”></div>.  That’s all you really need.  This div gets populated via the javascript file you’ve included, and that’s where the magic happens.

The second parameter represents the text you want animated.  This must, as we would expect, be a string variable, and can contain whatever text you want, of whatever size, styled however you like.

The third parameter is the interval length (in milliseconds) between typed letters.  Here we have set to a base interval of 100 milliseconds.  We say “base” because…

The fourth parameter is the range of randomness between typed letters.  To increase the “realness” of the effect, not every letter should appear in exactly the same interval,  just like typing!  This fourth parameter allows the user to specify the length (in milliseconds) of the range of differences they’d like to see the letters typed in.  For example, a “base interval” of 100 and a “range interval” of 100, means that our letters will actually be typed each at a random interval between 50-150.  In other words, we started at 100, but we allowed for 100 milliseconds in range, ending with a range of 50-150 milliseconds.

Efficiency:
Other methods of creating typing effects fall short for a couple reasons.  One method utilizes the fact that monotype fonts have every character the same width.  Their method works by revealing the div at a constant number of pixels at a constant interval.  The obvious downfall is that you must use monotype font, and changing font size throws a wrench in the whole scenario.

Another method utilizes javascript’s innerHtml method.  This method constantly updates the inner HTML of a div to reflect whatever font they want to simulate typing.  The problem with this method is that innerHTML is a very tedious process.  Every time innerHTML is called, the browser must re-render a scene, effectively a “refresh”.  This can be detrimental to much more active websites and is generally considered bad practice.

Texttype.js call works in any type of font, and calls innerHTML just once per load.  It uses very simple CSS updates and is very gentle on the browser.  Texttype.js is essentially a series of <span> elements being displayed at randomized intervals inside the host div (specified by you).

texttype.js is wrapped in an unobstrusive function and can be called multiple times on the same page without any problems.   It can be called on click, page load, or any way you desire.   Lastly, I’ve made texttype.js to be so simple that anyone can do it.  With a very straight forward function prototype and simple usage, it’s a no-brainer.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s