Designs Freebies Inspirations Themes

15 jQuery Plugin for Animation and Typography

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Only a few years ago, if something was animated on a website it was automatically assumed to be Flash. However, this is not the case today. With the growing popularity and wide spread use of JavaScript frameworks, sometimes you have to take a closer look to find out what is powering all of those smooth animations.

JQuery is a cross-browser JavaScript library. Through its capability of creating plugins, web developers are able to extend its functions. Some of its features are used in navigating HTML documents, handling events, performing animations and embedding ajax interactions to web pages. Nowadays, users of JQuery have been incredibly increasing. So, don’t be left behind, here is a 15 Powerful jQuery Plugin – Animation and Typography that will help you a lot in making your website stand out from the rest.

If you like this post, share it with your friends through email and social networks. Please don’t forget to subscribe to our RSS-feed, follow us on Twitter and like our facebook Fan page for recent updates.

1. Lettering.js

15 jQuery Plugin for Animation and Typography - Designsmag

View Demo

A jQuery plugin designed to facilitate “radical web typography,” Lettering.js allows designers the ability to set dynamic and eye-catching typography that would be either prohibitively difficult or impossible to do using other methods. The goal of Lettering.js is to give you complete control over a web page’s type, right down to the manipulation of individual letters.

2. Shuffle Letters Effect

15 jQuery Plugin for Animation and Typography - Designsmag

A short tutorial for making a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.

View Demo

3. jMetronome

15 jQuery Plugin for Animation and Typography - Designsmag

View Demo

A popular concept in typography that aids in the spacing and arrangement of beautiful, easy-to-read type is called typographic rhythm. This is the idea — well established in the typography world — that the relationship between text and space in a document creates a visual rhythm, which affects the overall aesthetic tone and readability of the document.

In web pages, when body text is interspersed with images, tables, blockquotes and other elements, it can become difficult to maintain vertical rhythm without sacrificing content editing and flexibility.

The jMetronome plugin for jQuery helps make it easier to maintain the typographic rhythm of a web page even with the addition of non-textual elements.

4. FitText

15 jQuery Plugin for Animation and Typography - Designsmag

FitText helps you with typesetting, especially when crafting responsive web designs. The plugin automatically scales your text elements depending on the browser’s viewport size. An example scenario would be if you would like your headings to scale down when viewed in mobile devices to reduce the screen real estate they take up.

5. FontEffect

15 jQuery Plugin for Animation and Typography - Designsmag

View Demo

FontEffect is a jQuery plugin that gives designers the ability to apply text effects such as outlines, shadows, gradients and mirroring onto normal HTML text elements. This means FontEffect applies the desired effects without the need for images. Though these text effects can be achieved using CSS3, FontEffect could be useful if you prefer or need to use JavaScript.

6. jQuery Approach

15 jQuery Plugin for Animation and Typography - Designsmag

View Demo

This jQuery plugin provides web designers with the ability to make text objects change depending on the proximity of a user’s mouse cursor. For example, a designer can use Approach to configure a text element to grow smaller and lighter as the cursor approaches it, and to expand and become darker as it gets further away.

[ad name=”bnr-middle-post”]

This is a great plugin for designers who want to provide users with an interactive experience upon visiting the site.

7. jqIsoText

15 jQuery Plugin for Animation and Typography - Designsmag

View Demo

The jqIsoText jQuery plugin is a simple plugin that does one thing: It renders an arching effect whereby the characters of the target text element get bigger as you approach the center and then tapers off as you get to the last character. It mimics, to the best of its abilities, an isometric/reflective appearance. It’s an interesting, fun and single-purpose plugin that might be useful for calling attention to important text content using distinctive design principles.

8. Airport

15 jQuery Plugin for Animation and Typography - Designsmag

The Airport jQuery plugin is a text-animation plugin that mimics the old, flickering schedule/information boards you used to see in airports, train stations, bus stations, etc.

This plugin provides you with the ability to creatively style and animate text that you’d like to garner attention.

9. jQuery Glow

15 jQuery Plugin for Animation and Typography - Designsmag

View Demo

As the name implies, this simple jQuery plugin gives you the ability to make your text glow when you hover over them. Though a similar effect can be done with CSS3 (for ideas, see some interesting CSS3 experiments and demos), aside from the fact that many users still do not use CSS3-capable web browsers, using JavaScript allows you to bind the glow effect based on events outside of hover, trigger, focus, etc. that CSS can’t listen to.

10. jQuery sIFR Plugin

15 jQuery Plugin for Animation and Typography - Designsmag

The jQuery sIFR Plugin allows for the easy implementation of sIFR (Scalable Inman Flash Replacement).

sIFR is an old method of rendering text that use non-web-safe fonts. It uses Flash. Though @font-face is now the popular way of composing web type using custom fonts, it might have limitations that might make you choose sIFR instead. (However, sIFR has its own downfalls that can steer you away from it as well.)

11. jFontSize

15 jQuery Plugin for Animation and Typography - Designsmag

I’m sure you’ve seen the text size buttons on websites, before. This is what you need to do it!

View Demo

12. jQuery Text Resizer Plugin

15 jQuery Plugin for Animation and Typography - Designsmag

View Demo

The jQuery Text Resizer Plugin gives your users a degree of control over font sizes. The plugin, by default, adds three user commands to a web page (increase font size, decrease font size and reset to the normal font size).

Though most mainstream web browsers do offer text-resizing functionality, many Internet users aren’t aware that these features exist and might appreciate an in-page way to resize text.

The plugin works in tandem with the jQuery Cookie plugin so that it’s able to remember the user’s settings when they next visit (if they have cookies enabled, of course).

Another similar plugin to check out is Font Resizer.

13. BigText

15 jQuery Plugin for Animation and Typography - Designsmag

View Demo

The BigText jQuery plugin is simple: It automatically sizes your text to fit inside its parent element. This results in, among other things, perfect justified alignment (though typically justified alignment is achieved by altering the spacing of characters and words, not through font size). What’s great about this plugin is that it works in dynamic, editable text areas so that as the user types, the font resizes.

Animation Plugins

14. jQuery Transit

15 jQuery Plugin for Animation and Typography - Designsmag

jQuery Transit will aid you in creating super-duper-smooth CSS3 transformations and transitions for jQuery.

View Demo

 

15. jRumble

15 jQuery Plugin for Animation and Typography - Designsmag

This is a fun plugin. If anything, take a look at jRumble just to try it out.

View Demo

If you like this post, share it with your friends through email and social networks. Please don’t forget to subscribe to our RSS-feed, follow us on Twitter and like our facebook Fan page for recent updates.

About the author

Husnain Naz

Naaz is a web designer and loves to find new tips and tricks for creativity purposes and likes to share them with the people.

2 Comments

Leave a Comment