Letters

The HTML

	<div id="demo1" class="demo">
  <h1>Rainbow</h1>
</div>

The javascript

$.domReady(function() {
  $("#demo1 h1").littering();
});

The Result

Words

$("#demo2 h1").littering('words');

The Result

Lines

$("#demo3 p").littering('lines');

The Result

Advanced #1: Chaining 2 Methods

$("#demo4 h1").littering('words').children("span").littering();

The Result

Advanced #2: Chaining and Styling

$("#demo5 h1").littering()
	.children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});

The Result

Littering specific examples

Where littering diverges from Lettering.js is in accepting custom functions to define new splitting or formatting behaviour. Each call should be of the form

$("some selector").littering( splitter , formatter );
	

where splitter is either the name of a standard splitter ('chars', 'words' or 'lines') or a function (check the code for the form a custom splitter should take, you probably don't want one), and where formatter is a function of the form

function(item, i) {
  return '<span class="someclass' +(i+1)+ '">'+item+'</span>';
}

which simply accepts the item (char, word or line depending on splitter), and the index of the item, and returns a new html string to represent that item.

To split by character and replace every character in the sequence with 'a' you would use.

			$("#demo6 h1").littering('chars',function(){return 'a'});
	

The Result

More interesting examples

Tilt uppercase characters

    $("#demo7 h1").littering('chars',function(item,i){
      var str = item.charCodeAt(0) > 64 && item.charCodeAt(0) < 91 ? " upper" : "" ;
      return '<span class="char'+(i+1)+str+'">'+item+'</span>';
    });
	

The Result