We also made this HTML5 drawing application :)
This jQuery plugin takes text content of selected jQuery element and makes it appear letter by letter, by falling down from some direction.
So you can use it to imitate Flash banner behaviour since most simple Flash banners only display animated text anyway.
As you can see in example below, text goes out from linearly moving "sprinkler" and goes to it's normal positions. Path of "sprinkler" is determined by starting and ending coordinates.
At this moment, the plugin works with text enclosed to block display elements (p, h1-h6 etc). It won't work with nested elements. Maybe in the future.
You use jLetters the usual way:
$(selector).jLetters( { options } );
Each leaf falls as if it were motioning "no."
And yet there is Someone, whose hands
letterRate determines rate at which content spills in the screen. By default it is 100
letterSpeed determines speed of falling content, by default it is 140
shadow. If set to false (default), text will be normal, without shadow. If true, each letter will have pseudo-shadow (it will be printed twice with offset to original letter). You can additionaly modify it's CSS style (".jletters-shadow").
startX, startY, endX and endY are starting and ending coordinates of path along which the "sprinkler" moves during transition. Normally these values represent percent values relative to the container, between 0 and 100, but any of them can also be negative, or greater then 100, which will set them out of the container. Try playing with these coordinates, they are crucial for appearance.
reverse. If set to true, the whole process will go reverse. Letters will go from their initial position to positions determited by startX, startY, endX, and endY. By default it's false. If you use this feature, you will probably bind calling plugin to click or some other event.
Here is source code. I didn't minify it, it is small anyway. You can minify it if you want, and you can tweek it the way you want. I tried to make code as self-explanatory as possible. Here is CSS. Link it or paste it to your CSS and modify it as you want.
Include it usual way, and call it from document ready, or from any other event you like. For example :
<script type="text/javascript" src="jletters.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("body").jLetters( { letterSpeed : 20, letterRate : 2, startX : 74, startY : 80, endX : 10, endY : -70 });
});
</script>