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.
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).
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.
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 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.
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.
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 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.
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.
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.
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 is a plugin which allows for semantic blockquotes created on the fly with just one line of jQuery code.
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 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.
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.
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 » »