Best jQuery Text Effect Plugins & Tutorials with Demo

    jQuery webfonts : jQuery based webfonts extension

    May 7, 2013 | Plugins, Text Effect, Web
    jQuery webfonts : jQuery based webfonts extension

    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.

    Features :

    • Flexible font repository. The extension can work with any font repository file system.
    • Provides many APIs to customize and extend.
    • Applies font based on the html lang attribute of the elements
    • Make sure the font defined using font-family style for any elements, either using inline css or external css’ available for the reader. – without any extra code.
    Read More Demo

    Badonkatrunc : jQuery plugin for dynamic text layout and truncation

    May 7, 2013 | Plugins, Responsive, Text Effect
    Badonkatrunc : jQuery plugin for dynamic text layout and truncation

    Badonkatrunc is a jQuery plugin for dynamic text truncation and layout. Use it to truncate excerpts of unpredictable length, find the optimal font size for groups of elements or dynamically resize text for a responsive layout!

    Read More Demo

    Squishy : jQuery plugin for fitting text exactly to its container

    May 6, 2013 | Plugins, Text Effect
    Squishy : jQuery plugin for fitting text exactly to its container

    Squishy is a jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part.

    You can pass the script a number of options to restrict the squishiness. maxSize is used to set the maximum font size, minSize is used to set the minimum font size, maxWidth sets the maximum width of the line of text, and minWidth, the minimum (all in pixels, for now).

    Read More Demo

    TextFX2 : CSS3 Text Animations

    April 21, 2013 | Animation, CSS2 / CSS3.0, Premium, Text Effect
    TextFX2 : CSS3 Text Animations

    TextFX2 is a CSS3 Transition + CSS3 3D Transform plugin, and as stated above, all animations will revert to a simple fade for IE8, IE9 and Opera.

    Features:

    • Easily create animated sequences like the one shown in the demo. No manual scripting involved!
    • Animate multiple lines of text, examples included in source.
    • Option to automatically loop sequenced animations.
    • Option to randomize a sequence.
    • Hyperlink animated text.
    • Animate text on the fly with TextFX2’s API methods.
    • Free from jQuery = no jQuery conflicts!
    Read More Demo

    fancyInput : Typing in Input fields with CSS3 effects & jQuery

    April 8, 2013 | CSS2 / CSS3.0, Forms, Plugins, Text Effect
    fancyInput : Typing in Input fields with CSS3 effects & jQuery

    Makes typing & deleting in input / textarea fields exciting with CSS3 effects and jQuery

    Read More Demo

    jQuery Text Animation Plugin

    February 15, 2013 | Animation, Plugins, Text Effect
    jQuery Text Animation Plugin

    jQuery Text Animation Plugin is for making custom text animations.

    Read More Demo

    Kerning.js : Take control of your web typography with jQuery

    February 12, 2013 | CSS2 / CSS3.0, Plugins, Text Effect
    Kerning.js : Take control of your web typography with jQuery

    CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically.

    Kerning.js is a single script, small, and has no dependencies. Add it to your page, add some CSS rules, and your text will be beautified.

    Read More Demo

    Textillate.js : jQuery Plugin For CSS3 Text Animations

    February 2, 2013 | Animation, CSS2 / CSS3.0, Plugins, Text Effect
    Textillate.js : jQuery Plugin For CSS3 Text Animations

    Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.

    Read More Demo

    Wave Text Effect : jQuery Plugin

    December 23, 2012 | Plugins, Premium, Text Effect
    Wave Text Effect : jQuery Plugin

    Need a waving text? There is no need to use static images any more. This script will help you! Wave Text Effect is a jQuery plugin that creates a “wave effect” out of an HTML header. Most important – waving text will be friendly for search engines, editable, selectable. You can use wave period, amplitude and spacing between the letters to customize your effect. For further styling you can still use style sheets – changing your font type, size, colour, background, etc.

    Features:

    • Wave configuration (amplitude, period and letter spacing).
    • You can use CSS to style your text, change color, fonts, add backgrounds etc.
    • Generated text is still selectable.
    • This transformation is SEO friendly!
    Read More Demo

    figlet.js : jQuery parser for FIGlet fonts

    December 4, 2012 | Plugins, Text Effect
    figlet.js : jQuery parser for FIGlet fonts

    Figlet is a program for making large letters out of ordinary text.Figlet-JS is a JavaScript implementation of a FIGdriver and is available as a Node module and a jQuery plugin.

    Read More Demo