Creating a typing effect using javascript

Posted in: javascript by musiitwa joseph 2016-04-22 at 06:05:39



This uses an array of words. All words are shown character by character which gives the effect like typing of the words using a keyboard. When showing a character, there is a small delay before the next character is shown.
Each index of the array contains a set of words. There is a delay of one second before going to another index to allow someone to clearly see to the word that is after the typing effect.

The delays are created using javascript timeout function.

There is a function defined, when it is called it never stops running because it is a recursive function without a base case. Each time the function runs, a character is shown up.

If the next character is in the same index as the previous, its added to the end of the previous character. This countines until all words of that index are displayed.

When going to the next index, all the character of the previous index are first removed.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Typing words</title>
</head>
<body>

    <div style="font-size:15px; background-color:#CCC; padding:10px; color:blue;">
        <p>This is created using:</p>
        <p id="typeText"></p>
    </div>
    <script type="text/javascript">
    
        //function for getting any element by its id
        function _(id){
            return document.getElementById(id);    
        }
        
        //the array to be used for typing
        var words = ['Hypertext Markup Language(HTML)','Cascading Style Sheet(CSS)', 'JavaScript(JS)'];
        
        //declaring the array to store each character of the array item
        var splitted = new Array();
        //alert(length);
        for(var i=0; i<words.length; i++){
            splitted[i] = words[i].split("");//splitting the characters at each array item and storing it into an array
        }
        
        typingFuction(0, 0);//calling the function

        //recursive function without base case
        //it runs forever
        function typingFuction(i, j){
            var typingSpeed, delay; //declaring variables
            
            //typingSpeed for the words
            typingSpeed = 0.1;//in seconds
            
            //delay after typing a sentence or a word
            delay = 1;//in seconds
            
            //splitted is a multi dimensional array
            if(j<splitted[i].length){//checking if number of character of each item it not reached
                //stopping the appending a character if it doesnot belongs to another character
                _("typeText").innerHTML = (j==0)? splitted[i][j]: _("typeText").innerHTML+splitted[i][j];            
                j++;//incrementing to the next character of a given array item
                typingSpeed *= 1000;//converting the typing speed to milliseconds
            }else if(i==splitted.length-1 && j == splitted[splitted.length-1].length){//checking if all the items in the array have been printed
                i=j=0;//setting i and j to 0 sothat the typing continues which in the array indice
                typingSpeed = delay*1000; //converting the delay to milliseconds
            }else{            
                i++;//going to the next array item
                j=0; //starting at the first character of that array item
                typingSpeed = delay*1000; //converting the delay to milliseconds            
            }            
            setTimeout('typingFuction('+i+','+j+')', typingSpeed);    //calling the function again        
        }
    </script>
</body>
</html>

 

Tags:
css
html

Search

Leave a comment

Fields with * are required
Your email address will not be displayed
3 + 2 =