jSkew

This jQuery plugin gives your titles pseudo-skewed or pseudo-perspectived appearance, by simply scaling it's letters from bigger to smaller font-size, or the opposite. It can be applied on jQuery text selector, but it makes most sense for titles.

It can also be used to give your titles ransom note style, like newspaper randomly cut letters. This feature is for retro-style lovers, not for maniacs.

usage

You use jSkew the usual way:

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

options

from and to are font-sizes in which range your title should be rendered. If you don't specify them, jSkew will try to get CSS value of your title and give from and to some average + - values. For example, subtitle "Usage" on this page is rendered with options { from : 20, to : 40}, while subtitle "Options" is rendered without user having set either from or to.

ransom. By default it is false. If you set it to true, then it will create ransom style title, by shuffling font sizes and font families.

shadow. if set to true (but only if ransom is also set to true), it will dynamically increase CSS3 shadow property to give some kinda 3d appearence to those cut letters. However, this works only in CSS3 supported browser, but it is not essential. You can tweak script itself to modify this behaviour. Subtitle below is one example.

colorful. if set to true (but only if ransom is also set to true), it will color ransom-style letters with various colors. You can tweak script itself to modify this behaviour. Subtitle below is one example.

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.

Include it usual way, and call it from document ready, or from any other event you like. For example :

<script type="text/javascript" src="jplums.js"></script>
<script type="text/javascript">
        jQuery(document).ready(function() {
                $("h2.usage").jSkew({ from : 20, to : 40});
                $("h2.options").jSkew();
                $("h2.download").jSkew({ from : 20, to : 40, ransom : true, shadow : true });
        });
</script>