jQuery text effect plugins enable you to perform various animations and effects on web content like rotate, scroll, flip, highlight, color, drop cap, bounce and much more. In this article you will find some of the best jQuery text effect plugins by which you can perform various animations on text and make your websites look distinctive and visually stunning.
Read Also –
JavaScript Text Effect Libraries for 2016
1. Per Word Action
A jQuery plugin utility which idempotently wraps every word within an element in a unique span and assigns each word a line-number data attribute. Takes a per-word callback function as an argument.
Demo & Download
2. TypewriterJS
TypewriterJS is a simple yet powerful native JavaScript plugin for a cool typewriter effect.
Demo & Download
3. Prettier
Prettier is an opinionated JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. Prettier gets rid of all original styling and guarantees consistency by parsing JavaScript into an AST and pretty-printing the AST.
Demo & Download
4. Adapttext.js
adapttext.js is a dependency free and simple JavaScript solution capable to fit your text inside the parent element. It calculates the maximum font-size possible in order to keep the text’s width and height inside the parent.
Demo & Download
5. Cool Text Effects
With CoolText you can do it with a few lines of JavaScript or html attributes. It comes with 300 ready-to-use animations and with a tool that let you create your animation packs. You can use it both with JavaScript and html markup. CoolText lets you animate letters or words, control speed and stagger, create animation sequences and so on. And its responsive and SEO friendly. CoolText takes advantage of TweenMax and the flexibility of jQuery.
Demo & Download
6. jQuery Webfonts
jQuery WebFonts extension adds font embedding capability to jquery using the WebFonts technology. The extension provides a flexible way to choose font from a font repository and apply on html elements.
Demo & Download
7. TextFx
TextFX is a jQuery text animation tool for animating a single line of text. It is built for easy usage, but also lends itself nicely to more advanced coders with it’s flexible script. TextFX uses jQuery version 1.10.2.
Demo & Download
8. Shave
Shave is a zero dependency JavaScript plugin that truncates multi-line text to fit within an html element based on a set max-height. It then stores the diff of the original text string in a hidden span element following the visible text. This means the original text remains intact.
Demo & Download
9. Mark.js
jQuery.mark is a jQuery plugin to highlight text with diacritics, synonyms, custom elements, custom class names, separate word search (multiple terms), filter selectors, word boundary and iframe support. Compatible with DataTable.
Demo & Download
10. PullOuts
PullOuts allows to grab any piece of content from a web page and display it as a pullout widget. Whether it’s a block of text, images, shopping cart, login, search or subscription form, a video or any other content – you can make it a pullout.
Easy to use code generator will help you to set your widgets in seconds. Flexible settings: multiple triggers to active your pullouts, unlimited colors, hundreds of icons and dozens of animation effects will enhance your website and amaze your visitors.
Demo & Download
11. jQuery TextFill
jQuery TextFill is a jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible.
Demo & Download
12. Flapper
Flapper is a jQuery plugin that replicates the split-flap (or “Solari”) displays that used to be common in train stations and airports, and your dad’s alarm clock in the 70s.
These displays used a rotating stack of letters and numbers printed on hinged panels. As the stack rotated, a new symbol would fall into place. Flapper recreates this effect using CSS transformations.
Demo & Download
13. jQuery Sinescroller
jquery.sinescroller.js is a jQuery scroll plugin which allows scrolling a line of text along a sine curve (i.e. make a wavy text scroller, with each letter following a sine and rotating accordingly).
This is an unusual and interesting way to present a scrolling text on the web and attract your visitors. Useful for all sorts of advertising messages, promotions, exclamation texts and banners. The string can be also be just statically laid out and not animated for an exciting header or a curious sidebar subtitle. It’s also possible to animate in place. The string will wiggle without actually scrolling.
Demo & Download
14. Digital Write
jQuery plugin to write characters on a 5X5 matrix with colors, animations and size. Using this plugin, you can create such characters with animations, color options & size options.
Demo & Download
15. NuvuType
This plugin takes all the text of a selected container and splits it at the white spaces then prints it into the container word by word using customizable animation effects.
Demo & Download
16. Rainbow.js
jQuery plugin to create rainbow or gradient text, optionally animated.
Demo & Download
17. Embed.js
A jQuery plugin for converting text emojis into image-based emoticons, also supporting an automatic media embedding system for multimedia URLs (earlier emoticons-js). You can embed google maps pointing to a location in all possible configurations like streetview, place etc.
Demo & Download
18. Swap Countdown
Swap Counter is the web’s most advanced animated text counter plugin. It’s easy to setup, amazingly flexible and ships with beautiful animation presets. Whether you want to visualize visitor counts, count down to a date, show upload progress, social media followers, or donation status, Swap Counter has got your use case covered.
Demo & Download
19. CharCycle
A jQuery plugin to create a cycling effect on selected text at some event. Attach the plugin to the element you want to trigger the cycling, specify the target text you want to produce the effect and include a conditional statement to ensure that cycling isn’t re-triggered while the effect is in progress.
Demo & Download
20. Hover Effects
This hover pack allows you to add animation effects to images, when it hovered. Also you have ability to add text that will go over image and this text also can be animated. In this pack you can find 10 image animation effects and 10 animation effects for text, that goes over image. Also you can combine several text animation effects for one item.
Demo & Download
21. Jumble
A jQuery plugin that jumbles up the colours of your text headers, and can also animate them. Choose a colour range for the colours to be jumbled amongst, and set params for whether the shuffle is based on brightness or saturation hue.
Demo & Download
22. CircleType.js
Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle. You can use any font, adjust letter-spacing as usual with CSS, flip it around so it reads counter-clockwise instead. You can also Set the radius manually or let CircleType.js figure it out for you
Demo & Download
23. Textillate.js
Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unique effects.
Demo & Download
24. Wodry.js
Wodry.js is a simple jQuery plugin for a text flipping/rotating written in CoffeeScript. It was inspired by the Adjector.js. Wodry.js does the same things but it has new features that allow you to set animation from animations collection, set your own callback on content flipping, etc.
Demo & Download
25. FunnyText.js
funnyText.js is a jQuery plugin that creates animation for the letters inside a text moving them vertically or horizontally. Ideal for titles and you can configure colors, speed of movement, font size.
Demo & Download