jQuery TypeByLetter: Make string of text appear letter by letter

Recommend this page to a friend!
     
  Info   Example   Demos   View files Files   Download Download   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

Jackson Knowlton

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
Picture of Jackson Knowlton
  Performance   Level  
Name: Jackson Knowlton <contact>
Classes: 4 packages by
Country: United States United States
Age: 26
All time rank: 536 in United States United States
Week rank: 6 Up2 in United States United States Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 3x

Winner: 1x

Example

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        * {
            color: #2C2E37;
        }

        body {
            font: 18px sans-serif;
            background-color: #ddd;
        }
    </style>

    <script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>
        (function($) {

            $.fn.TypeByLetter = function(options) {
                var settings = $.extend({
                    speed: 100,
                    content: $(this).text(),
                    append: false,
                    callback: function() {}
                }, options);

                return this.each(function() {

                    var $object = $(this);
                    var text = " " + settings.content;
                    var arrayOfText = text.split("");
                    if (settings.append == false) {
                        $object.text("");
                    }

                    function type(i) {
                        i = i || 0;
                        $object.append(arrayOfText[i]);
                        console.log(arrayOfText[i]);
                        if (i < arrayOfText.length) {
                            i++;
                            setTimeout(function() {
                                type(i)
                            }, settings.speed);
                        } else {
                            settings.callback.call();
                        }
                    }

                    type(0);
                });

            };


            //Calling the plugin
            $('h1').TypeByLetter({
                callback: function() {
                    $('body').TypeByLetter({
                        speed: 50,
                        content: 'This text is loaded into .TypeByLetter through the option "content", and has the options of- speed:50, append: true',
                        append: true
                    });
                }
            });
        })(jQuery);
    </script>
</head>
<body>
    <h1>This is the new and upgraded .TypeByLetter Plugin!</h1>
</body>
</html>

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  
  Files folder image Files (3)  
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

Downloadtype-by-letter-2015-07-24.zip 1KB
Downloadtype-by-letter-2015-07-24.tar.gz 1KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:110
This week:0
All time:399
This week:5Up

  Applications that use this package  
Example Page

Add link image If you know an application of this package, send a message to the author to add a link here.