Web studio
Breve

Čeština Srpski English

jLetters
v1.1. 2011-11-10

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.

Usage

You use jLetters the usual way:

$(selector).jLetters( { options } );

The leaves are falling, falling as if from far up,

as if orchards were dying high in space.

Each leaf falls as if it were motioning "no."

And tonight the heavy earth is falling

away from all other stars in the loneliness.

We're all falling. This hand here is falling.

And look at the other one. It's in them all.

And yet there is Someone, whose hands

infinitely calm, holding up all this falling.

Options

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.

Download

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>

jLetters on jQuery.com