20 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

jQuery Text Effects

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.

Demo and Download

Textgrad – A jQuery Text Gradient Plugin

jQuery Text Effects

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.

Demo and Download

jQuery Label Effects

jQuery Text 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).

Demo and Download

Text-shadow in IE with jQuery

jQuery Text Effects

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.

Demo and Download

jQuery Grab Bag – Text Effects Plugin

jQuery Text Effects

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

Demo and Download

jQuery Approach

jQuery Text Effects

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.

Demo and Download

jTicker – Typing Text Effect using jQuery

jQuery Text Effects

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.

Demo and Download

Effects jTypeWriter v1.1

jQuery Text Effects

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.

Demo and Download

3D Flying Text in jQuery

jQuery Text Effects

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.

Demo and Download

Airport – Information Board Text Effect

jQuery Text Effects

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.

Demo and Download

jQuery: Flying Text With Fade Effect

jQuery Text Effects

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

Demo and Download

Codename Rainbows

jQuery Text Effects

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!

Demo and Download

Fade colors using jQuery

jQuery Text Effects

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

Demo and Download

Fading Color Effect for Inline Text Links using jQuery

jQuery Text Effects

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.

Demo and Download

Playing with jQuery Color Plugin and Color Animation

jQuery Text Effects

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

Demo and Download

Color Changing Text and Backgrounds w/ jQuery

jQuery Text Effects

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.

Demo and Download

jQuote Plugin

jQuery Text Effects

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.

Demo and Download

Search And Share

jQuery Text Effects

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.

Demo and Download

Set Font Size Based On Word Count

jQuery Text Effects

Demo and Download

Zooming with jQuery and CSS

jQuery Text Effects

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.

Demo and Download

Use the jQuery UI to Control the Size of Your Text

jQuery Text Effects

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.

Demo and Download

Simple jQuery Text Resizer

jQuery Text Effects

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.

Demo and Download

Author: (608 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments