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 [ 87 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

  8. nandy
    July 10, 2013

    it not working in my browser.



» Trackbacks and pingbacks click to expand

  1. [...] in jQuery che con una sola riga di codice permette di ottenere degli effetti davvero interessanti. Qui c’è l’articolo che ne descrive il semplicissimo utilizzo, mentre qui potete [...]

  2. [...] Efectos isométricos para texto mediante este plugin jQuery. – jqIsoText: jQuery Text Effect Plugin « Workshop [...]

  3. [...] 18. JQISOTEXT text effect plugin [...]

  4. [...] jqlso Text: Biegsame Typografie Dieses jQuery-Plugin versieht Textelemente mit einem Bogeneffekt. [...]

  5. [...] jqlso Text: Biegsame Typografie Dieses jQuery-Plugin versieht Textelemente mit einem Bogeneffekt. [...]

  6. [...] jqlso Text: Biegsame Typografie Dieses jQuery-Plugin versieht Textelemente mit einem Bogeneffekt. [...]

  7. [...] arc of the given radius.TextualizerTextualizer allow you to transition through blurbs of text.jqIsoTextSome content on our pages are more important than other and we want to made him eye catching. There [...]

  8. [...] schönere Typografie, wie z.B. BigText, jMetronome, Lettering.js, FitText, jQuery Text Resizer und jqIso Text findet ihr mit kurzer Beschreibung in unserer News jQuery-Plugins: 10 Helfer für schönere [...]

  9. [...] MORE INFO | DEMO – by Davatron5000 (Free Plugin) [...]

  10. [...] jqsloText: This plugin is another for those willing to make some edgy design choices, as it renders an arching effect (gets bigger as you approach the middle and then tapers off) on HTML text. [...]

  11. [...] With this plugin you can change size of letters in text. It starts from one font size and increment or decrement to other font size. On that way you will get something similar to isometric projection. That can be done for whole block of text or for every word in some text. Plugin Demo Plugin Details & Download Page [...]

  12. [...] Grab BagTextgrad  Arctext jQuery GlowFitText Textualizer BigText jqIsoText  READY TO TAKE WEB DESIGN SERIOUSLY?Today, I am giving away Web Design Riches, the ultimate guide [...]

  13. [...] Download the jqIsoText plugin Share this:TwitterFacebookGoogle +1LinkedInPinterestTumblrEmailPrintLike this:LikeBe the first to like this. Tags: jQuery, jQuery Plugins, Plugins. Bookmark the permalink. [...]

  14. [...] jqIsoText - 為文字加上菱形的 pseudo-isometric 效果。 [...]

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

  16. | 爱分享 says:

    [...] jqlsoText [...]

  17. [...] 插件演示 插件的详情及下载页面 [...]

  18. […] [Visit page - Download] […]

  19. […] 5. JqIsoText [Visit page - Demo - Download] […]


Leave a Reply

More Articles


more on WORKSHOP.rs