Steve Breese

A Chicago-based full stack web developer with a passion for user experience

Orderly Typer.js

Demo

I am a developer

Installation


<script src="js/jquery.js"></script>
<script src="js/jQuery.OrderlyTyper.js"></script>
<script>
  jQuery(document).ready(function($){
    $.OrderlyTyper.options = {
      rotateRamdomly    : false,
      highlightSpeed    : 20,
      typeSpeed         : 100,
      clearDelay        : 500,
      typeDelay         : 200,
      clearOnHighlight  : true,
      OrderlyTyperDataAttr     : 'data-OrderlyTyper-targets',
      OrderlyTyperInterval     : 4000
    }

    $('[data-OrderlyTyper-targets]').OrderlyTyper();
  });
</script>
...
<span data-OrderlyTyper-targets="I am a web developer,I am a web application 
developer,I am a geospatial developer,I am a web designer,I am a mobile app 
developer,I am a web programmer">I am a developer</span>

This is an enhanced version of Kelly Sutton's Typer.js. While his only allows for random looping over a set of strings, mine defaults to looping them in the order they are listed. This prevents the phrases from being repeated closely to one another, which could cause the web visitors to loose interest.