Typing effect

      No Comments on Typing effect

Typing effect – this function gives a simple way to create typing effect in java-script.

Typing effect

HTML:

<span id="scanfcode"></span>

Java-Script


// constant array, holds the strings to be displayed
const items = [
  'JAVASCRIPT',
  'HTML / CSS',
  'PHP - MYSQL'
]

//counts the number of characters in a single string
var count=0;

// holds the index for number of strings
var index=0;
 
function typingEffect()
{
  var text=items[index];  //sets text to first string
  if(count<text.length)  
    {  
     
       // places the character in element with id 'scanfcode'     
      document.getElementById('scanfcode').innerHTML +=text[count];
      count++;

      // function repeats itself in 300ms
      setTimeout(function() { typingEffect(); }, 300);
    }
   else
    {

      //increments the index by checking whether index+1 does not exceed the total strings.
      index= (index+1<items.length)? index + 1 : 0;
   
      //sets count to 0 
      count=0;

      //empty the element with id 'scanfcode'
      document.getElementById('scanfcode').innerHTML = " ";

       //function repeats after 500ms (changes string)
      setTimeout(function() { typingEffect(); }, 500); 
    
    }
}
typingEffect(); //calling function first time

Demo:

See the Pen typing-effect in javascript by scanfcode (@scanfcode) on CodePen.

Summary
Typing effect
Article Name
Typing effect
Description
Typing effect - this function gives a simple way to create typing effect in java-script.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *