jqIsoText: jQuery Text Effect Plugin

Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that.  One of them is jqIsoText.

jqisotext

With this plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On that way we’re getting something similar to isometric projection. That can be done for whole block of text or for every word in some text.

First download jQuery and jqIsoText and include on your page like this:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqIsoText.js" type="text/javascript"></script>

After that all you have to do is to select element on which you want to apply effect and call jqIsoText.

<script>
$(".elem").jqIsoText();
</script>

This plugin have only three options: fromSize, toSize and split. The first one is the size of first letter, second is the size for middle letter in text and third one is if you want to threat every word from text separately. E.g. if you want that your text in h1 tags starts from 50px, go to 20px and threat every word separately you should use next code snippet.

<script>
$(".elem").jqIsoText({ fromSize: 50, toSize: 20, split: 'yes' });
</script>

You sholud use this plugin for titles or some important line of text. Using this for long text may be difficult for reading and can cause opposite effect. Also, this can be used only for text nodes.



Comments [ 73 Comments ]

  1. Mael
    March 3, 2010

    Soooo fun !
    I hope I’ll find a way to use it for real project :)

  2. Vladimir
    March 7, 2010

    fantasticno – prepa i zasigurno buducnost kod textualnr web prezentacije. Vec mogu da zamislim koliko ljudi ce promeniti Index i Home addrese na web stranicama a tek koliko ce neko da ih odere da to uradi. Srecno i hvala na prelepom tut’s’u

  3. Gilberto
    January 19, 2011

    More good

    link to you

    http://tecwebbr.com/post.php?codigo=99
    thank!

  4. sjaban
    April 30, 2011

    hello
    wher i must put this code:

    $(”.elem”).jqIsoText({ fromSize: 50, toSize: 20, split: ‘yes’ });

    thanx

  5. Swot template
    October 29, 2011

    Nice, thank u.

  6. Web dizajn
    September 10, 2012

    Odlicno, hvala puno…samo tako nastavite.

  7. siddhu
    January 2, 2013

    code not working in my browser



» Trackbacks and pingbacks click to expand

  1. [...] Lettering.JS FitText.JS Bacon! TypeButter Kerning.JS Baseline.JS ArcText.JS Hatchshow SlabText.JS JQISOText [...]

  2. | 爱分享 says:

    [...] jqlsoText [...]


Leave a Reply

More Articles


more on WORKSHOP.rs