JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<h1>How to create a typing/typewriter effect with jQuery</h1>
<h2>Features:</h2>
<ul>
  <li>Blinking cursor</li>
  <li>Text pauses at the end</li>
  <li>Typed text is "rewinded" (ereased backwards)</li>
  <li>Eternal loop animation</li>
</ul>

<div>Animation: </div>
<span id="target"></span>
<span id="cursor"></span>
<!-- used for the blinking cursor effect -->


<!-- Google Font, soley for cosmetics purposes -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<!-- jQuery is REQUIRED -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

CSS

/********************
  No CSS is required
  CSS below is for stetics ONLY
********************/

body {
  font-family: 'Raleway', sans-serif;
}

h2 {
  font-style: italic;
}

div {
  font-weight: bold;
  font-style: italic;
}

#target {
  color: red;
}

#cursor {
  color: green;
}

#target,
#cursor {
  font-weight: bold;
  text-transform: uppercase;
}

JavaScript

/********************
	How to create a typing/typewriter effect with jQuery
	-With a blinking cursor, pausing text, rewinding and eternal loop
********************/


/********************
   Plugin
********************/
(function($) {
  // writes the string
  //
  // @param jQuery $target
  // @param String str
  // @param Numeric cursor
  // @param Numeric delay
  // @param Function cb
  // @return void
  function typeString($target, str, cursor, delay, cb) {
    $target.html(function(_, html) {
      return html + str[cursor];
    });

    if (cursor < str.length - 1) {
      setTimeout(function() {
        typeString($target, str, cursor + 1, delay, cb);
      }, delay);
    } else {
      cb();
    }
  }

  // clears the string
  //
  // @param jQuery $target
  // @param Numeric delay
  // @param Function cb
  // @return void
  function deleteString($target, delay, cb) {
    var length;

    $target.html(function(_, html) {
      length = html.length;
      return html.substr(0, length - 1);
    });

    if (length > 1) {
      setTimeout(function() {
        deleteString($target, delay, cb);
      }, delay);
    } else {
      cb();
    }
  }

  // jQuery hook
  $.fn.extend({
    teletype: function(opts) {
      var settings = $.extend({}, $.teletype.defaults, opts);

      return $(this).each(function() {
        (function loop($tar, idx) {
          // type
          typeString($tar, settings.text[idx], 0, settings.delay, function() {
            // delete
            setTimeout(function() {
              deleteString($tar, settings.delay, function() {
                loop($tar, (idx + 1) % settings.text.length);
              });
            }, settings.pause);
          });

        }($(this), 0));
      });
    }
  });







  /********************
    Plugin defaults  
  ********************/
  $.extend({
    teletype: {
      defaults: {
        delay: 100,
        pause: 5000,
        text: []
      }
    }
 ...