jQuery is not just about Menus and Animation Effects. With jQuery you can also create attractive text effects and play with the text to communicate well with the users. With this collection, you can create text gradients, text fly effects, text glow and much more.

1. Mouse Over Animation for Text

You can use this jQuery plugin for adding flavor to your web site. By this plugin, text messages on your site are animated on mouse over. jQuery animate function is called for each character of text. You can see very interesting effects so many characters animate at the same time.



2. Text-shadow in IE with jQuery

With the soon-released FireFox 3.1, three of the four major browsers support text-shadow. That leaves just Internet Explorer with the lack of text-shadow. I have already taken care of that problem, but decided to wrap it up in a nice automated jQuery plugin. One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. For a more in-depth explanation of h



3. Textgrad : a jQuery text gradient plugin

Here is my very first attempt to make a text-gradient plugin for jquery. It contains four functions appliable to a selection : spanize, unspanize, textgrad and textscan.



4. Text Fly: A jQuery Experiment in With Easing Callbacks and Text Animation

Here is another jQuery animation experiment, this time with animating text using an easing equation.



5. Fading Color Effect for inline text links using jQuery

Here is a simple UX trick that can be easily implemented into your web sites. With a few lines of jQuery it will make your text links fade to another color on rollover. How? Read on.



6. Flashy Intro With jQuery Animation

Remember those days which almost every website has a Flash intro or header that makes you wait un? forever. Now more and more people are using jQuery animation function to make their sites interesting. Let?s see how we do it.



7. jQuery: Flying Text With Fade Effect

With this great javascript framework, jQuery, you can create some flash like effects. In this post, I will show how to create very simple flying and fading text effect using jQuery.



8. Simple jQuery Text Resizer

A simple jQuery based text resize. The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.



9. jQuery Text Glow Effect

A simple jQuery Tutorial to create Text Glow Effect in jQuery.



10. jQuery tutorial: Text box hints

You will see a lot of web sites with search boxes have text already populated inside of the field and when you select the input text box it disappears and reappears when it’s not selected. This tutorial will show you how can add a small amount of jQuery to add this feature to any of your web sites.



11. Grab Bag jQuery Text Effects

Some fun little text effects. These manipulate $(ele).text() so will probably be disastrously broken with inner HTML content.



12. jQuery to text changes with fading effect

In this jQuery tutorial we will develop a program that changes the text with fading effect.

Share and Enjoy:
  • Print this article!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

3 Responses to “Text Effects In jQuery”

  1. [...] This post was mentioned on Twitter by Mike Sprague, jquerywisdom. jquerywisdom said: Text Effects In jQuery http://is.gd/4ZJRf [...]

  2. [...] Text Effects In jQuery [...]

  3. este ejemplo esta bastante bueno gracias por dedicar un tiempo suyo para darnos estos granmdioso tips

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>