JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<!-- 
        Here I use Google's CDN to serve the jQuery js libs.
        To speed up the page load, put these scripts at the bottom of the page 
    -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


<h1>How to create a typing/typewriter effect with jQuery</h1>

<div id="container"></div>

CSS

h1, h2 {
  text-align: center;
}

#container {
  font-size: 24px;
}

JavaScript

//define text
var text = 'This is a typewriter effect. You can change this text easily ...';
var speed = 80; //The higher the number, the speed is slower.

//text is split up to letters
$.each(text.split(''), function(i, character) {

	setTimeout(function() {
    //Add the letter to the container
    $('#container').html($('#container').html() + character);
  }, speed * i);
});