Monday, January 2, 2012

3 Totally Cool jQuery Text Animation Plugins


3 Totally Cool jQuery Text Animation Plugins

jQuery is without a doubt a very awesome JavaScript library. It doesn't just let you create great-looking Image gallery and Menus but also attractive text effects as well. Out of the great text animation plugins out there, I found these three to be most creative AND refreshing.

Textualizer – First one on our list is a text animator plugin created by Kiro. Called Textualizer, it is an extremely lightweight jQuery tutorials plugin at just around 4kb. It is capable of rotating any number of words and even sentences beautifully. 

Once a sentence transitions into another one, their common letters move into their new locations using several effects that you are free to choose from: fadeIn, slideLeft, slideTop, and random. You can also define the duration that each item will be displayed and also the duration of the transitions.



Shuffle Letters Effect – Aside from the plugin itself, this includes a tutorial as well. As the name states, it shuffles the text content of the DOM element, which is great for headings, logos, and slideshows. If you look at the screenshot below, it’s in the process of shuffling through the last letters of the phrase. Then again, why settle for a screenshot when you see it in action? Go ahead and click on the demo link under it!



NuvuType – This plugin takes words inside a selected container and then prints them word per word on another container using the available animation effects that you have applied. You do this by simply including a few lines of code on your page wherein you can set the typing speed, delay, and font colors. The linked page also allows you to try out the plugin and customize the animation yourself so you can have fun with it.

Options include:

·         Four different customizable color options, with customized colors for each option.
·         Set a trigger element or auto load the text when the page loads.
·         Set a delay for the text when triggered or auto loaded.
·         Set a speed for the text typing animation.
·         Grow or shrink the text to any size.
·         Lightweight – only 7Kb min version.


No comments:

Post a Comment