The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×


    A simple jQuery plugin for a slick typing effect.
    Filed under 

    • 🔾25%Overall
    • 745
    • 264.8 days
    • 🕩108
    • 👥3


    jquery.typer.js can be used one of two ways:

    Type once with typeTo()

    If you just want to use the effect once, use typeTo(). It can be used as follows:

    $('h3').typeTo("New Text");

    This will do a one-time transition.

    Type indefinitely with typer()

    Now let's say you want to loop over a set of strings for the typing effect. Easy!


    That code will start the effect on all elements with the data-typer-targets attribute.

    You obviously need to supply it with some source data. The data-typer-targets attribute can be either a comma-separated string or a piece of JSON.


    There are some options that are available to you as well:

    // Defaults
      highlightSpeed    : 20,
      typeSpeed         : 100,
      clearDelay        : 500,
      typeDelay         : 200,
      clearOnHighlight  : true,
      typerDataAttr     : 'data-typer-targets',
      typerInterval     : 2000

    Set the options individually:

    $.typer.options.highlightSpeed = 500;


    jquery.typer.js was originally developed for LayerVault by Kelly Sutton.

    You can see more projects from LayerVault in the LayerVault Cosmos.

    Show All