20 Cool jQuery Text Effects

March 29, 2012 · 14 comments

by Lars

jqueery-text-effects

With jQuery text effects you can do really cool and dynamic stuff on your web pages. However keep in mind that text effects in web design is far away from the popularity we saw in the early days of the Internet and in some cases can be best used as funny JavaScript effects. Back then text usually was flying around (just because it could), it was changing colors in rainbow style etc. And then of course placed next to a few ugly, intense colored animated icons and other examples of pixel art.

Today some cool jQuery text effects can still be useful when used right and often they are also simple to install and use. This article is a roundup of the jQuery text effects you can use in your web development or just check out to be inspired. Keep in mind though that the trend goes towards creating HTML5 canvas animations and text is not the only element to play around with.

A really popular type of jQuery plugins are jQuery Slider or jQuery Carousel plugins typically used for showcasing featured content and products.

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.


ElegantThemes
ThemeForest

Advertisement

1. jQuery Flying Text With Fade Effect

jquery-flying-text-with-fade-effect

With this great javascript framework, you can create some flash-like, very simple flying and fading text effect using jQuery.

2. jQuery Word Counter

image

This plugin allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events.

3. jQuery Text Animation

jQuery-Text-Animation

Text Animation plugin lets you to add to any text specified text animations e.g random_explosion, random_implosion, sinusoid.

MORE INFO / DEMO by Codecanyon (premium plugin)

4. jTicker Typing Text Effect using jQuery

image

jTicker is a jQuery plugin that can be used for creating text 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 wherever 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.

5. Codename Rainbows

image

Even without Photoshop, you can make text effects with this by just typing a little code.

6. Grab bag, jQuery text effects

image

With grab bag jQuery plug-ins, you can have different effects to the text.

7. Textgrad : a jQuery text gradient plugin

textgrad

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.

8. TextFX – A jQuery Text Animation Tool

textFX

TextFX is a jQuery text animation tool for animating a single line of text

MORE INFO / DEMO

9. Fade Colors Using jQuery

face-color

This tutorial will explain how to fade a color in array of elements using jQuery

10. Playing with jQuery Color Plugin and Color Animation

image

This is the tool if you want to change the color of the text and icons once your mouse is pointed to it.

11. jQuery Approach

image

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.

12. AutoCompleter

image

With autocompleter, your site becomes more user friendly by providing suggestions when a text is entered.

13. 3d Tag Sphere

image

A rotating 3d tag cloud controlled with the mouse. Tags are scaled according to the weight assigned to them and fade into the background as they rotate.

14. Simple jQuery Text Resizer

image

Simple jQuery Text resizer adjusts the size of your text for easier readability by clicking the icon.

MORE INFO / DEMO

15. Airport

image

Airport is 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.

16. Zooming with jQuery

image

This effect allows the reader to zoom the text for better reading.

17. Text-shadow in IE with jQuery

text-shadow

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.

18. jQuery Label Effects

jquery-label

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.

19. 3D Flying Text in jQuery

3d-flying-text

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.

20. jQuote Plugin

jQuote is a plugin which allows for semantic blockquotes created on the fly with just one line of jQuery code.

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

{ 14 comments… read them below or add one }

Yogi Liman October 31, 2013 at 9:01 pm

jTicker Typing Text Effect using jQuery reminds me of the green good old days when everything was much simpler. Black and green writing Basic.

I can think of some ways to use this. Thanks for sharing!

Reply

got2be July 31, 2013 at 11:58 pm

Smooth, nice and smooth.

Reply

jasa web February 22, 2013 at 4:20 am

i like this Simple jQuery Text Resizer.. awesome collection.. but this is not free…

Reply

Shakeel February 2, 2013 at 10:56 am

this is awesome collection… thanks mate for sharing… :)

Reply

Glucaf webmaster January 11, 2013 at 6:10 pm

Cool effects :)

Reply

Mohamad Shakeel December 31, 2012 at 5:59 am

Good work… thanks for sharing :)

Reply

pondicherry media November 22, 2012 at 5:18 am

awesome effects, i was searching for jquery, thanks mate for sharing all those jquery effects.

Reply

Grant McLean October 27, 2012 at 4:14 am

You might also be interested in this jQuery plugin I put together for doing title sequences like in a movie: http://grantm.github.com/jquery-title-sequence/. I’ve primarily used it for animating text with fades, wipes and scrolls.

Reply

Bangladesh law firm September 26, 2012 at 12:53 pm

This is great. thanks

Reply

EDDM Printing Guy August 18, 2012 at 2:16 pm

HTML5 Rocks!!!, It helped me a lot to do amazing things on my websites as well.

Reply

genetica multimedia August 18, 2012 at 10:43 am

amazing! i found what i was searching… long life to html5 and javascript 😉

Reply

EDDM Printing Guy August 8, 2012 at 10:43 am

This is great. It helped me achieve some decent text effects

Reply

Huynh Hieu May 30, 2012 at 6:07 am

thanks, that’s good

Reply

Rob RS March 29, 2012 at 7:56 am

I miss the fun in a lot of the internet today! Though I am liking the resurgence of Javascript in conjunction with html5 and css3 to develop the aesthetics of the web.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous post:

Next post:


Web Analytics