15 Awesome jQuery Text Effects for Your Website

15 Awesome jQuery Text Effects for Your Website

“I found a great many pieces of punctuation and typography lying around dormant when I came along – and I must say I had a good time using them.” – Tom Wolfe

When designing a website, you need to take extra special care of the landing page, as it is the page that reels in potential customers or frequent users.

So you start doing an awesome design, and eventually finish doing it, and you notice that needs a little something extra; something like a text effect. But you are weary and tired, and just don’t feel like putting in the extra minutes, or even hours, in CSS, or finding the perfect color, shape and angle for the text.

The solution to this is getting a plugin or ten off the internet. Problem with this solution is that with so many of them to choose from, you will probably spend more time picking which one to download, than you would actually making making it yourself.

To save you some time, we went on an expedition through the vast territory that is the internet, and came back with a few awesome jQuery text effects. You can download these, and make yourself a competent little collection, to have on hand whenever you might need them.

1. JQISOTEXT

20-Awesome-jQuery-Text-Effects-for-Your-Website-1

Image source

This pseudo-isometric text effect would work great if you are trying to make something like a “shocking news” headline. What it does is start from one font size, and increment or decrement to another font size, the effect being similar to isometric projection. Ivan Larevic, the author of this text effect, also shows you how to implement it in your designs, so using it should be as easy as pie.

2. LetterFX

20-Awesome-jQuery-Text-Effects-for-Your-Website-2

Image source

LetterFX is a collection of several text effects, all of which run quite smoothly. It temporarily injects markup into text, sequentially adding or subtracting transition based CSS classes. Our personal favorite, out of all the effects, has to be “smear”. Unlike its name suggests, we feel that it probably is the classiest effect in the bunch.

3. Kern.js

20-Awesome-jQuery-Text-Effects-for-Your-Website-3

Image source

We are pretty sure that you are going to instantly fall in love with this bookmarklet. Even non-designers can quickly get behind this, and understand what is going on. All you have to do is add the bookmarklet to your browser, then activate it when you are at the page you want to modify. Once activated, you can click and drag to adjust things like letter placement, line height and kerning, and once done, a CSS will be generated for you to copy in your own stylesheet.

4. jQuery TextFX by Chris Cates

20-Awesome-jQuery-Text-Effects-for-Your-Website-4

Image source

Chris Gates’ TextFX is also a collection of several features that are all easy to implement, as the API is binded to a single function. You will need to install Transit, because TextFX uses CSS Transforms, instead of jquery.animate() transitions.

5. Kerning.js

20-Awesome-jQuery-Text-Effects-for-Your-Website-5

Image source

This effect lets you kern, style, transform and scale your web type automatically with CSS rules. Best part about it is how easy it is to use; you just have to add a single script to your page, and you are good to go. Kerning.js also features dynamic updating, so you can apply its styles whenever you add a new element to the page, and it prevents FOUC, so your page will always look pristine.

6. CurvedText

20-Awesome-jQuery-Text-Effects-for-Your-Website-6

Image source

Still in its Beta stages, CurvedText is made by Oliver Musebrink, and it is a great collection of animations, customized letters, transformations and plugins. The presentation is really what sold us on this one, being done with humor and a terrific eye for the aesthetic of the whole thing.

7. jQuery Super Simple Text Rotator by Pete R.

20-Awesome-jQuery-Text-Effects-for-Your-Website-7

Image source

We have seen quite a few landing pages with rotating text on them in the past couple of months, so this item is definitely going on our list. Peter R. made this effect really easy to implement, while also keeping it looking really great. A definite must-have in your toolbox.

8. Foggy

20-Awesome-jQuery-Text-Effects-for-Your-Website-8

Image source

Using the “-webkit-filter: blur” CSS attribute, Foggy does an absolutely lovely job of blurring either text, image or both on a website, allowing you to be able to implement or special messages to your website, and make sure that the user can focus on them. It is compatible with all major browsers, including Internet Explorer 8 and higher, and if the browser does not support it, Foggy falls back to a manual blur.

9. Simple Text Spinning Effect with jQuery

20-Awesome-jQuery-Text-Effects-for-Your-Website-9

Image source

Using basic jQuery functions, Arvind Bhardwaj has created a script that than animates text, so that it would appear to be spinning. It works by increasing and decreasing the “letter-spacing” CSS property, making it look like the text is spinning around an axis.

10. slabText

20-Awesome-jQuery-Text-Effects-for-Your-Website-10

Image source

Simply put, this plugin creates big, bold and responsive headlines. How does it do it? The script splits into rows, then it resizes them, filling the available horizontal space. It gets the ideal number of characters per row by dividing the available width by pixel font size, after which it ideal number to separates the headline into word combinations, displayed as different rows of text.

11. Typey

20-Awesome-jQuery-Text-Effects-for-Your-Website-11

Image source

Typey does not do much, but it does it really well. It is an API wrapper that makes picking and choosing the right font a whole lot more easy, by letting you hover over a paragraph, and selecting fonts, font size etc. from a dropdown that appears while you hover.

12. Textify

20-Awesome-jQuery-Text-Effects-for-Your-Website-12

Image source

The next item on our list is not free, but you definitely get your money’s worth. It is a jQuery plugin that streamlines the process of creating a modern layout for you to display content on your web page, avoiding to show users longer, more boring text. It is compatible with all modern browsers, including Internet Explorer 7 through 9, and it can also be used on mobile touchscreen devices.

13. Capital Letter

20-Awesome-jQuery-Text-Effects-for-Your-Website-13

Image source

Capital Letter is a very lightweight plugin for creating, that’s right, capital letters. You do this by simply adding the script after the jQuery library, and you can also pass any CSS you like to be applied to the capital letter. Just do not include the script directly from GitHUB!

14. Wave Text Effect

20-Awesome-jQuery-Text-Effects-for-Your-Website-14

Image source

Wave text effects are hardly rocket science, but they do look really good when used properly. This plugin is really simple and intuitive, and the best part is: the text will still be search engine friendly.

15. Cool Text Effects

20-Awesome-jQuery-Text-Effects-for-Your-Website-15

Image source

We have saved the best for last. The last entry on our list is a fantastic tool, that comes equipped with 300 ready to use animations, as well as an option that lets you create your own. It can be used with both JavaScript and HTML, and is 100% SEO friendly.

That concludes our list of 15 awesome jQuery text effects. We hope you will find what you are looking for on this list, and that it will help you create amazing websites. Tell us your thoughts on this article, as well as any other cool text effects you know about, in the comment section below.

Leave a Reply

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