20+ Easy to Use jQuery Text Effects and Animations

You don’t need to be a hardcore coder or developer to use jQuery, it is an easy and useful JavaScript library and with basic knowledge you can easily insert jQuery plugins and spruce up your next web project.
Font Embedding Services are all the rage at the moment, and for some, maybe a little bit overblown. What if you wanted something simpler, a little drop-shadow here, a simple text animation or even dynamically resize text. In this post we have collected 20+ simple and easy to use jQuery text effects and animations.

FontEffect jQuery Plugin

The Font Effect plugin uses no images to add an Outline, Shadow, Gradient or Mirror effect to your html text and no additional CSS is necessary. All effects are contained in the plugin (only 7k minified) and do not interfere with page rendering in older browser or browser with javascript disabled.

Textgrad – A jQuery Text Gradient Plugin

This simple, yet effective adds a basic gradient effect to text. It contains four functions appliable to a selection, they are: spanize, unspanize, textgrad and textscan.

jQuery Label Effects

The Label Effects is a plugin that can apply highlight and shadow effects to anything that contains text. Several preset effects can be invoked via a single option that provides values for most of the other settings, they are: Raised, Sunken, Echoed, Floating and Shadow.
There is also a useful generator that allows you to select the style of text you want and it generates the code for you. (Click on the the plugins 'Custom' tab for the generator).

Text-shadow in IE with jQuery

Most of major browsers support text-shadow, yes, you guessed it, IE doesn't. This handy jQuery plugin helps you get around that.
A handy little thing of Internet Explorer is that it gives you access to CSS declarations it does not understand, so this plugin simply requests the text-shadow value of a given element and processes that.

jQuery Grab Bag – Text Effects Plugin

This plugin offers a wide array of text effects, they include Scrambled Writer, Unscramble, Rot-13 and a Typewriter effect.

jQuery Approach

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. This plugin is not strictly limited to text effects, it can also be used for images.
Note: The plugin accepts any CSS property that is accepted by jQuery animate, and also accepts color-based parameters, if you are using the jQuery UI Effects Core.

jTicker – Typing Text Effect using jQuery

jTicker is a jQuery plugin that can be used for creating the typewriter effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text, but should be used only when necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

Effects jTypeWriter v1.1

Similiar in effects to the plugin above, jTypeWriter is a useful plugin for re-creating the effect of a typewriter in any number of HTML text nodes. jTypeWriter can handle the type writing of more than one nodes, and type the characters in sequential order.

3D Flying Text in jQuery

In this tutorial you will learn how to animate text with jQuery. You will build a jQuery component that takes the text from a <ul> and make it fly towards the screen at random intervals. The affect will look something like traveling through space, or a title sequence for some cheesy space flick.

Airport – Information Board Text Effect

Airport is a rather simple text effect plugin that emulates the style of those flickering information boards you sometime find on airports and train stations.
Airtport is very easy to use, all you have to do is create an element, give it an ID and throw airport on it. The values, moscow, berlin and stockholm, are the words it will flick through.

jQuery: Flying Text With Fade Effect

In this tutorial you will learn how to create a very simple flying and fading text effect using jQuery.

Codename Rainbows

Codename Rainbows allows you to effortlessly apply gradients, shadows and highlights to text.
The gradient in this plugin is comprised of a series of one-pixel-high slices of text. These slices are arranged vertically. Every slice is a slightly different shade, and when the slices are positioned via CSS the result is a smooth gradient created entirely without images.
Awesome plugin!

Fade colors using jQuery

This tutorial, from Janko at Warp Speed, will explain how to, using two methods, fade a color in an array of elements using jQuery.

Fading Color Effect for Inline Text Links using jQuery

In this article you can read about 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.
This useful effect has been tested in FF, IE7 and Opera on Win and FF, Safari on Mac.

Playing with jQuery Color Plugin and Color Animation

In this tutorial you will learn four different methods to create some nice text effects for menus and buttons using the jQuery Color Plugin.

Color Changing Text and Backgrounds w/ jQuery

Normally you would define the text color in the CSS and that would be the end of it. In this tut, you will learn how to be able to adjust colors after the page has loaded, and not just once either – you’re aiming for continuous adjustments.

jQuote Plugin

jQuote is a plugin which allows for semantic blockquotes created on the fly with just one line of jQuery code.
The really handy thing about jQuote is that If javascript is not enabled, jQuote does not run and those with javascript disabled don't see duplicated text – which is what would happen if you did the usual method of copying and pasting text to create quotes.
One of the useful extras with this plugin is the option to add a person's name to the quote – for example if quoting a famous person it is always good to credit them. Nice.

Search And Share

Search and Share makes highlighting text a more functional action by attempting to understand the intention of a user’s text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing.

Set Font Size Based On Word Count

Zooming with jQuery and CSS

In this article you will learn how to develop Text Zooming using jQuery and CSS. This is basic level tutorial for changing styles easily with a jQuery script. A very useful tutorial for zooming website content.

Use the jQuery UI to Control the Size of Your Text

In this tutorial you will learn how to use a slider to control the text size of an article on a page, allowing the user to control exactly the size that suits them.

Simple jQuery Text Resizer

The idea of this plugin 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, it will take advantage of that body class when you are writing your CSS to size the different elements appropriately.

You might also like…

25 Useful jQuery Tooltip Plugins and Tutorials »
20 jQuery Plugins and Tutorials to Enhance Forms »
30 Tutorials Combining Both WordPress and jQuery »
25 Fresh and New jQuery Plugins and Tutorials »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS » »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials » »
22 CSS Button Styling Tutorials and Techniques » »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials » »