Best jQuery Text Effect Plugins & Tutorials with Demo

    CircleType.js : jQuery plugin for setting type on a circle

    CircleType.js : jQuery plugin for setting type on a circle

    Circletype.js is a tiny jQuery plugin that lets you set type on a circle.

    Features:

    • Use any font
    • Adjust letter-spacing as usual with CSS
    • Flip it around so it reads counter-clockwise instead
    • Set the radius manually or let CircleType.js figure it out for you
    • Works in fluid and responsive layouts
    • Plays well with FitText.js

    novacancy.js : Text Neon Golden effect jQuery plug-in

    novacancy.js : Text Neon Golden effect jQuery plug-in

    novacancy.js is a text neon golden effect jQuery plugin.

    HATCHSHOW : jQuery Typesetting plugin

    HATCHSHOW : jQuery Typesetting plugin

    Hatchshow will automatically add a span to each line of text and scale the font size so each line ends up the same width. This is another plugin that’s useful for creating classic or vintage designs.

    FlowType.js : jQuery plugin to Auto-resize the Font-size

    FlowType.js : jQuery plugin to Auto-resize the Font-size

    FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer. The plugin has options for setting the min/max font-sizes and min/max widths where the resizing will be triggered. It also works fine with webfonts and a nice demo shows how it works (just resize the browser for the demo page).

    jQuery Text Highlighter Plugin

    jQuery Text Highlighter Plugin

    jQuery Text Highlighter is a jQuery plugin for highlighting text fragments in HTML documents.Highlighting is realized by wrapping selected text in <span> tags.

    Features:

    • Highlighting text that spans multiple HTML tags.
    • Removing highlights.
    • Setting highlight color and custom text wrapper.
    • Callbacks for highlighting and removing highlights.
    • Serialization & deserialization of highlights.

    Responsive-Measure : jQuery Responsive Ideal Measure Plugin

    Responsive-Measure : jQuery Responsive Ideal Measure Plugin

    Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.It also has the ability to generate a resolution independent font-scale based on the ideal font-size.

    Succinct : jQuery plugin for Truncating Multiple lines of Text

    Succinct : jQuery plugin for Truncating Multiple lines of Text

    A tiny jQuery plugin for truncating multiple lines of text.Succinct shortens your text to a specified size, and then adds an ellipsis to the end.

    Jumble : jQuery plugin that jumbles the Colours of Text & Animate

    Jumble : jQuery plugin that jumbles the Colours of Text & Animate

    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 satuation hue.

    Nyan Bars : jQuery Animated text progress bars

    Nyan Bars : jQuery Animated text progress bars

    Animated text progress bars parsed from a simple string language.

    Text Opening Sequence with CSS Animations & jQuery

    Text Opening Sequence with CSS Animations & jQuery

    Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS. we’ll use Dave Rupert’s Lettering.js to wrap the words and letters into multiple spans.