Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Typewriter effect

b_stb
b_stb Community Member - Trial User Qubie ✭
edited June 23 in Survey Platform

Hello, 


I am carrying out a study in which I wish to make several people's speeches appear in writing. 

For example: Math: "I like apples".

My problem is that I would like "I like apples" to appear letter by letter on the screen and not all at once.


So I would like to create a typewriter effect.


Any help would be greatly appreciated! 


Thanks!

Best Answer

  • rondev
    rondev Community Member Wizard ✭✭✭✭✭
    edited October 2020 Accepted Answer

    Paste the below code in the HTML view of the question

    <div id="demo">&nbsp;</demo>
    

    Paste the below code in the onReady function of the javascript:


    	function typeWriter() {
          if (i < txt.length) {
             document.getElementById("demo").innerHTML += txt.charAt(i);
             i++;
             setTimeout(typeWriter, speed);
          }
      }
    	
    	var i = 0;
       
      var speed = 100;
    	
    	var txt = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
    
    	typeWriter();
    

    Check the demo here

Answers