Fork me on GitHub

Littering

The following are some hokey examples of how you can implement Littering.

Getting

Littering is used via ender (and currently is dependent on qwery and bonzo). Add it to your ender build with

  ender add littering

or start using a new ender lib with

  ender build littering

This page (but not littering itself) is also dependent on domready

Letters

The HTML

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

The javascript

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

The Result

Rainbow

Rainbow

Words

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

The Result

Hi, Multi Color

Lines

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

The Result

This is an amazing
Revolution in Typography.
The possibilities are endless:
Coloring, Vertical spacing, and Kerning.

Advanced #1: Chaining 2 Methods

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

The Result

Double Rainbow

Advanced #2: Chaining and Styling

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

The Result

WOOOoo!

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

WOOOoo!

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

WOOOoo!

Context Sensitive

Kerning (suggested by @gka). Apply a class to any A before a T.

    $("#demo8 h1").littering('chars',function(item,i,items){
      var str = i > 0 && items[i-1] == "A" && item == "T" ? " kern_AT" : "";
      return ''+item+'';
    });
  

The Result

RATTA TAT TAT