Icontem

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    
Last Updated Ratings Unique User Downloads Download Rankings
2015-07-24 (2 years ago) RSS 2.0 feedNot yet rated by the usersTotal: 106 All time: 389 This week: 14Up
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
Winner


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
  Performance   Level  
Name: Jackson Knowlton <contact>
Classes: 4 packages by
Country: United States United States
Innovation award
Innovation award
Nominee: 3x

Winner: 1x

Details
/*

 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  
 0%
Total:106
This week:0
All time:389
This week:14Up