jQuery TypeByLetter: Make string of text appear letter by letter

Recommend this page to a friend!
  Info   View files Example   Demos   View files View files (3)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 110 All time: 399 This week: 5Up
Version License JavaScript version Categories
type-by-letter 2.0.1GNU General Publi...1.3Animation, jQuery
Description Author

This is a jQuery plugin that can make string of text appear letter by letter.

It can make a given text string appear inside a given page container element, one letter at a time.

The text may be appended to existing content or replace the content inside the container element.

The presentation speed parameter determines the delay that happens between two consecutive letters.

Innovation Award
JavaScript Programming Innovation award winner
August 2015

Prize: One book of choice by Packt
Sometimes it is nice to make text appear slowly as if the user is typing one letter of the text at a time.

This jQuery plugin that can animate a text to make it appear one letter at a time at a given speed.

Manuel Lemos
Picture of Jackson Knowlton
  Performance   Level  
Name: Jackson Knowlton <contact>
Classes: 4 packages by
Country: United States United States
Age: 24
All time rank: 536 in United States United States
Week rank: 6 Up2 in United States United States Up
Innovation award
Innovation award
Nominee: 3x

Winner: 1x

/* JQuery TypeByLetter Plugin Version 2.0.1 source : /TypeByLetter.plugin.js dependency: jQuery TypeByLetter is a JQuery plugin for simulating a "typing effect" on an element. It supports using text already in the element, or through its {content} option. Current Available Options: {speed} - (int) Sets the time break in milliseconds between letters being written to the element. DEFAULT: 100 {content} - (plain text -or- JQuery .text()) Specifies the text that will be written to the specified element. This can be a JQuery selector such as: $('p#text').text(). DEFAULT: $(this).text() {append} - (bool) Specifies whether the text appends to the element (true), or if it erases the elements html before writing (false). DEFAULT: false {callback} - (function) Function to be run once the typing is done. */
  CodePen UsageExternal page  

Open in a separate window

  Files folder image Files  
File Role Description
Plain text file TypeByLetter.plugin.js Class plugin source
Accessible without login Plain text file TypeByLetter.docs.js Doc. Documentation
Accessible without login Plain text file example.html Example Example Page

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:399
This week:5Up