10 Magicial jQuery Text Effect Plugins

Sam Deering
10 magical jQuery Text Effect Plugins to really give your website some attention! 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. Enjoy!


1. Codename Rainbows

We use some JavaScript and CSS magic to apply a two-color gradient to any text. Shadows and highlights can also be applied. This works especially well on big sites or dynamic content where it’d be impractical to create images for every instance.
Codename-Rainbows.jpg
Source


2. jQuery FontEffect Plugin

Font effect is a jQuery plugin that add some effect to html text. The available effects are (for now) Outline, Shadow, Gradient and Mirror.
jQuery-FontEffect-Plugin.jpg
Source


3. Textgrad : A jQuery Text Gradient Plugin

It contains four functions applicable to a selection : spanize, unspanize, textgrad and textscan.
Textgrad-A-jQuery-Text-Gradient-Plugin.jpg
Source


4. jQuery Label Effects

A jQuery plugin that applies highlight and shadow effects to text in a control.
jQuery-Label-Effects.jpg
Source


5. jQuery Approach

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. It works in a very similar manner to jQuery animate, however it animates over distance instead of time.
jQuery-Approach.jpg
Source


6. 3D Flying Text in jQuery

Here is a tutorial that will show you how to make 3D flying text in jQuery.
3D-Flying-Text-in-jQuery.jpg
Source


7. Airport

A rather simple text effect plugin for jQuery. It emulates the style of those flickering information boards you sometimes find on airports and train stations.
Airport.jpg
Source


8. 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
jQuery-Flying-Text-With-Fade-Effect.jpg
Source


9. Fade Colors using jQuery

This tutorial will explain how to fade a color in array of elements using jQuery.
Fade-Colors-using-jQuery.jpg
Source


10 It’s a Rainbow! – Color Changing Text and Backgrounds with jQuery

Here’s a quick and easy way to cycle between multiple colors smoothly. Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors after the page has loaded, and not just once either – we’re aiming for continuous adjustments.
It’s-a-Rainbow-–-Color-Changing-Text-and-Backgrounds-with-jQuery.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.