Best jQuery Text Effect Plugins & Tutorials with Demo

React Text Gradient Effect

React Text Gradient Effect

A React component that creates text gradients with CSS, including a SVG fallback.

  • Uses CSS gradients when possible (Chrome, Safari, iOS, android).
  • Uses SVG as fallback on Firefox.
  • The text remains as fluid text (never replaced with svg).
  • Font size, family, weight, etc… controlled by CSS as normal.

Dynamic CSS3 max height plugin for jQuery

Dynamic CSS3 max height plugin for jQuery

This is a jQuery plugin to dynamically check a layer height and compare it to a custom height value. If layer height is higher than that custom value (data-maxheight), a “show more” button and a bottom gradient will appear.

Flapper : jQuery Split-Flap Text Animation

Flapper : jQuery Split-Flap Text Animation

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.

TypeIt : jQuery Animated Typing Plugin

TypeIt : jQuery Animated Typing Plugin

A jQuery plugin that outputs text like it’s being typed. It allows you to type single strings, multiple strings that stack, and multiple strings that delete & replace each other. It’s lightweight, scalable, and super easy to implement.

Digital Write jQuery plugin

Digital Write jQuery plugin

jQuery plugin to write charecters on a 5X5 matrix with colors, animations and size.Using this plugin, you can create such charecters with animations, color options & size options!

Responsive SVG Handwriting Font Animation Script

Responsive SVG Handwriting Font Animation Script

You can create easily SVG text with any font and animate it in your wordpress dashboard or directly in your PHP file.

  • Compatible with any browser, including Internet Explorer
  • Use your own font file. Any font can be used
  • Publish your animation anywhere with a few lines of PHP code.
  • Using presets.
  • Create stylish animations unlimited and publish in 5 minutes.

IsoBlocks : Eye-candy Isometric Texts with jQuery & CSS3

IsoBlocks : Eye-candy Isometric Texts with jQuery & CSS3

IsoBlocks is an experimental library to create eye-candy isometric texts. It is written in coffeescript, uses CSS3 transforms for creating the cubes and CSS3 transitions for the animation.

FlipPhone.js : jQuery plugin for Flipping letters

FlipPhone.js : jQuery plugin for Flipping letters

FlipPhone is a jQuery plugin for ‘flipping’ letters to numbers via CSS3 animations.

Unicoder.js : JavaScript library for Artistic Unicode Alphabets

Unicoder.js : JavaScript library for Artistic Unicode Alphabets

Unicoder.js is a small javascript library, which converts letters of a given text to some of the more artistic unicode alphabets.

Unicoder.js is a stand alone, vanilla javascript library, so usage is pretty straight forward. Its a matter of creating a new instance of Unicoder, and calling translate.

Rainbow.js : jQuery plugin for Creating Rainbow or Gradient Text

Rainbow.js : jQuery plugin for Creating Rainbow or Gradient Text

jQuery plugin to create rainbow or gradient text, optionally animated.

  • colors: an array of CSS color values
  • animate: boolean
  • animateInterval: # of ms between frames
  • pad: pad the color array with the last color so the gradient appears only once
  • pauseLength: # of ms to pause between iterations through the colors