A tiny stand-alone library that allows you to dynamically add content to a web page and delay it's appearance on the screen.
About
Chardelay.js is a tiny (1.5Kb gzipped) library that creates at least one new element that will display each item of content with a delay. In it's simplest form it will display text similar to a typing effect. Chardelay.js has been designed to perform with most modern browsers including IE8. While Chardelay.js can stand on it's own without any other library dependencies it is capable of accepting a jQuery element object as a parameter.
[ Press button to start ]
Getting Started
Grab a copy then add the minified version to your document (the following assumes you have a /js directory to place the file into):
<script src="js/chardelay.min.js"></script>
Example of adding Chardelay to an HTML document.
Once that is in place we can begin with the initialization. The initialization can be simple or robust.
In it's simplest form a new Chardelay instance can be created with only one argument. This required arugment will be the content which we want to have a delayed display. This argument takes either a String, Number, or an Array.
// Create a string
var myStr = "No matter where you go, there you are.";
// Create a basic Chardelay instance
var myCd = Chardelay(myStr);
Illustrating the most basic instance of Chardelay.
This minimal usage may not be entirely practical as it uses the default settings so Chardelay.js allows for customization via overriding the defaults with optional parameters.
Optional Parameters
Chardelay.js has six (6) optional parameters that are available.
parentEl :
Object of parent element for inEl to be used as a container. Must be a valid HTML element object. Accepts element by Id, Class, or jQuery element object.
Default: document.body.
delay :
Number of milliseconds between placing output items. Must be greater than 0 or default will be used.
Default: 150.
inEl :
String of type of HTML element to create for our output to be placed inside. Accepted types are "p", "span", "div".
Default: span.
css :
String of CSS class for output to be styled as. Note: No dot(.).
Default: chardelay.
Booleanto stipulate whether innerHTML of parentEl is overwritten.
Default: false.
multi :
Boolean to stipulate whether the content is to be placed inside a single HTML element or each item of content gets it's own element.
Default: false.
Usage
There are two (2) methods to implement a Chardelay.js instance, aside from the bare method that was shown above. These two methods are:
Standard array of arguments:
//Here we are using a jQuery element object for the 'parentEl' optional argument
var myChardelay = Chardelay( contentString, $("#container"), 300, "p", "coolText", "v", false, true );
Instantiation using array of arguments
Arguments array with object used for optional parameters:
// By setting 'multi' to true each character will be inside it's own div
var myChardelay = Chardelay( contentString, {
"parentEl" : $("#container"),
"delay" : 225,
"inEl" : "div",
"css" : "shadow",
"layout" : "v",
"overwrite" : false
"multi" : true
});
Instantiation using an object for optional parameters
This usage allows more freedom. The options do not have to be in order and can use as few options as needed, even simply changing the css parameter to another class.
Samples
Display a horizontal menu of multiple spans with a .3s delay
Display a column of numbers inside multiple <p>'s with a .4s delay
Display an image gallery of multiple divs with a .5s delay
