JavaScripting

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


  • ×

    Jquery.typer.js

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

    • 🔾26%Overall
    • 757
    • 145.9 days
    • 🕩112
    • 👥3

    Usage

    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!

    $('[data-typer-targets]').typer();
    

    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.

    Options

    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;
    

    About

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

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

    Show All